Apply CSS ~ combinator for first child

Question

I have two items in a parent and need to apply CSS to first child only if second/other child exist. ~ does that, buy only to siblings of the first child and I need it vice versa.

tldr: Make <label> red with no <div> before it, but after it

div ~ label {
  color: red;
}

https://jsfiddle.net/q836Lev1/1/

div ~ label {
  color: red;
}

<fieldset>
  <div></div>
  <label>this label is red</label>
  <div>works, but not good, there must be no first div.</div>
</fieldset>

<fieldset>
  <label>this label is red</label>
  <div>doesn't work, label should be red and div comes after.</div>
</fieldset>

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. — Paulie_D
– Paulie_D, Commented Jun 6, 2017 at 14:23
Possible duplicate - stackoverflow.com/questions/1817792/… — Paulie_D
– Paulie_D, Commented Jun 6, 2017 at 14:24
You could wrap the div and label in another div and use label:first-child:last-child. If there's no nested div, it'll select the label. — Joseph Marikle
– Joseph Marikle, Commented Jun 6, 2017 at 14:28
From the CSS3 standard: The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one. So it doesn't work the way you want. — Gerard
– Gerard, Commented Jun 6, 2017 at 14:29

Johannes · Accepted Answer · 2017-06-06 14:30:19Z

1

You could use label:nth-last-child(2):

label:nth-last-child(2) {
  color: red;
}

<fieldset>
  <div></div>
  <label>this label is red</label>
  <div>works, but not good, there must be no first div.</div>
</fieldset>

<fieldset>
  <label>this label is red</label>
  <div>doesn't work, label should be red and div comes after.</div>
</fieldset>

answered Jun 6, 2017 at 14:30

Johannes

67.9k22 gold badges84 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BoltClock Over a year ago

As demonstrated in your snippet, this still matches both labels.

BoltClock Over a year ago

Your answer is accepted so I guess I misunderstood the question.

Collectives™ on Stack Overflow

Apply CSS ~ combinator for first child

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related