I need to select the first non-hidden/visible child element excluding records with a specific class only using css

Issue

In the below example, I want to change the text color of the first child that is visible.

Here <div> with the class of HideWidget should be excluded; so, I want to see "two," "four" and "eight" to be colored red.

I have tried below css and its showing only "four":

.parent .child .field:not(.HideWidget):first-child {
  color: red;
}
<div class='parent'>
  <div class='child'>
    <div class='field HideWidget'>One</div>
    <div class='field'>Two</div>
    <div class='field'>Three</div>
  </div>
  <div class='child'>
    <div class='field'>Four</div>
    <div class='field'>Five</div>
    <div class='field'>Six</div>
  </div>
  <div class='child'>
    <div class='field HideWidget'>Seven</div>
    <div class='field'>Eight</div>
    <div class='field'>Nine</div>
  </div>

JSFiddle

Solution

`

.parent .child .field:not(.HideWidget):first-child,
.parent .child .field.HideWidget+.field {
    color: red;
}
<div class='parent'>
  <div class='child'>
    <div class='field HideWidget'>One</div>
    <div class='field'>Two</div>
    <div class='field'>Three</div>
  </div>
  <div class='child'>
    <div class='field'>Four</div>
    <div class='field'>Five</div>
    <div class='field'>Six</div>
  </div>
  <div class='child'>
    <div class='field HideWidget'>Seven</div>
    <div class='field'>Eight</div>
    <div class='field'>Nine</div>
  </div>

Should help you with red color on Two, Four and Eight

Answered By – Karthik

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published