CODEWITHSUNDEEP
htmlcsscss-selectors
Ian Vink
Ian Vink

Reputation: 68810

CSS Siblings, First

We are using a bought packaged theme with the following CSS:

.rdio input[type="radio"]:disabled + label  {
     color: #999;
 }
 <div class=rdio> 
    <input type=checkbox>
     <label....>
 <div>

As you can see it only is applied if a label is directly a sibling of the checkbox.

We can't alter the CSS, I have to write a Custom.css to be loaded after the main theme css.

what new, additional CSS can I add that would allow for this (first label sibling, but not direct)

 <div class=rdio> 
   <input type=checkbox>
   <one element of anything>
   <label....>
</div>

I'm looking for the overide I can do, as I can't edit the original css.

Upvotes: 0

Views: 120

Answers (1)

David Thomas
David Thomas

Reputation: 253485

There's two options, the obvious:

.rdio input[type="radio"]:disabled + * + label

And the (marginally) less obvious use of the general sibling combinator (the ~):

.rdio input[type="radio"]:disabled ~ label

If you really must only target, as your question implies, the first label element following the input:

.rdio input[type="radio"]:disabled ~ label {
    /* style the labels */
}

.rdio input[type="radio"]:disabled ~ label ~ label {
    /* override subsequent label element styling */
}

Upvotes: 3

Related Questions