css selector with pattern

Nesan Mano 0
Viewed 27

I have a styling to write in such way that it should cover most elements that follow the pattern. There is a default style sheet that covers the class attribute.

I have this in my page:

<label class="control-label" id="selectror_test_1" data-original-title="" title="">
      some value
    </label>

I am trying to write the following :

[id^='selectror_test_']{
    color:red
}

The problem is the default style sheet has

.control-label{
    color:black
}

The pattern based style that I am trying to write is not overriding the default style applied.

css html
1 Answers

There are multiple ways to solve this override by default css.

  1. we can use !important to override. But that stricts to apply default css in some scenario (not recommended always)

  2. or the best option to use prefix as a css class, as mentioned below -

    .control-label[id^='selectror_test_']{ color:red }

userEkYa0
Related