Frage Zielen Sie das erste Element nur an, wenn es andere Geschwister hat


Ohne Hinzufügen von Klassen (oder Berühren des HTML) gibt es eine Möglichkeit, das erste Element innerhalb eines div NUR anzusteuern, wenn es ein zweites Element in diesem div gibt? Unten ist mein HTML:

<div class="grid">
    <div class="content">I WANT TO APPLY CSS TO THIS</div>
    <div class="content">But only if there is 2nd .content element in the same parent element</div>
</div>
<div class="grid">
    <div class="content">Don't apply here</div>
</div>
<div class="grid">
    <div class="content">Don't apply here</div>
</div>
<div class="grid">
    <div class="content">I WANT TO APPLY CSS TO THIS</div>
    <div class="content">But only if there is 2nd .content element in the same parent element</div>
</div>

Ein paar Kontexte dazu für ein besseres Bild ... Ich möchte das zentrieren .content wenn es das einzige .content innerhalb ist .grid. Aber wenn es zwei sind .content divs, dann möchte ich, dass sie nebeneinander schweben.

Hinweis:

Ich weiß bereits, dass ich das zweite anvisieren kann .content durch

.grid .content:nth-child(2) { ... }

5
2018-01-06 01:01


Ursprung


Antworten:


.grid > .content:first-child:not(:only-child) {
    color: blue;
}
<div class="grid">
    <div class="content">I WANT TO APPLY CSS TO THIS</div>
    <div class="content">But only if there is 2nd .content element in the same parent element</div>
</div>
<div class="grid">
    <div class="content">Don't apply here</div>
</div>
<div class="grid">
    <div class="content">Don't apply here</div>
</div>
<div class="grid">
    <div class="content">I WANT TO APPLY CSS TO THIS</div>
    <div class="content">But only if there is 2nd .content element in the same parent element</div>
</div>

:first-child:not(:only-child) wäre dein Selektor.


8
2018-01-06 01:05