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

Questions

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

August 5, 2022

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