Selectați toate elementele, cu excepția primului, folosind CSS3 (Programare, Css, Selectori Css)

Eric Herlitz a intrebat.

Am nevoie să selectez toate anteturile, dar primul

<div class="block">
    <div class="header">first</div>
</div>
<div class="block">
    <div class="header">second</div>
</div>
<div class="block">
    <div class="header">third</div>
</div>
<div class="block">
    <div class="header">fourth</div>
</div>

Folosind jquery aș face acest lucru $(".header:not(:first)"), sunt însă limitat la CSS/CSS3. Nu pot să etichetez elementele altfel decât în exemplul meu.

Folosind .header:not(:first-child) nu va rezolva problema

Comentarii

  • Ce ziceți de .block:not(:first-child) .header? –  > Por Harry.
  • The .header clasa este irelevantă în selectarea nu primul element, cu excepția cazului în care aveți alte .block elemente care conțin alte clase în ele –  > Por AGE.
1 răspunsuri
Josh Crozier

.header nu sunt frați și surori, prin urmare, ar trebui probabil să selectați toate elementele, cu excepția primei clase. .block element, apoi să selectați elementul descendent .header de acolo:

.block:not(:first-child) .header {}

În funcție de marcajul dvs., este posibil să doriți, de asemenea, să negați primul de tip dacă tipurile de elemente sunt diferite:

.block:not(:first-of-type) .header {}

După cum subliniază David Thomas, puteți utiliza, de asemenea, opțiunea combinatorul de frați adiacenți, + sau combinatorul combinatorul general de frați și surori, ~ pentru a selecta toți frații următori:

.block ~ .block .header {}

sau:

.block + .block .header {}

Comentarii

  • Sau chiar :not(:first-child). –  > Por Harry.
  • Nu are niciun rost să postați răspunsuri alternative, deoarece ar deveni, în cele din urmă, doar o listă de alternative; deci: ați putea adăuga: .block + .block .header, sau .block ~ .block .header de asemenea? –  > Por David spune să o repunem pe Monica.
  • Nicio problemă, în plus întrebarea cerea în mod specific CSS3; așa că vom pune asta pe seama unei citiri corecte a întrebării, mai degrabă decât pe seama uitării… 😉 –  > Por David spune să o repunem pe Monica.
  • Asta pare să funcționeze, doar dacă nu am un div de omisiune în jurul fiecărui div de bloc –  > Por Eric Herlitz.
  • @EricHerlitz Schimbați selectorul în .block:not(:first-child) .header -> jsfiddle.net/5593hhhr celelalte elemente nu sunt frați și surori. –  > Por Josh Crozier.