CSS-kiezer voor eerste element met klasse

Ik heb een aantal elementen met de klassenaam red, maar ik kan het eerste element met de class="red"niet selecteren met het volgende CSS-regel:

.home .red:first-child {
    border: 1px solid red;
}
<div class="home">
    <span>blah</span>
    <p class="red">first</p>
    <p class="red">second</p>
    <p class="red">third</p>
    <p class="red">fourth</p>
</div>

Antwoord 1, autoriteit 100%

Dit is een van de meest bekende voorbeelden van auteurs die niet begrijpen hoe :first-childwerkt. Geïntroduceerd in CSS2, de :first-childpseudo-klasse vertegenwoordigt het allereerste kind van zijn ouder. Dat is het. Er is een veel voorkomende misvatting dat het het onderliggende element oppikt dat als eerste overeenkomt met de voorwaarden die zijn gespecificeerd door de rest van de samengestelde selector. Vanwege de manier waarop selectors werken (zie hiervoor uitleg), dat is gewoon niet waar.

Selectors niveau 3 introduceert een :first-of-typepseudo-class, die het eerste element onder broers en zussen van zijn elementtype vertegenwoordigt. Dit antwoordlegt met illustraties het verschil uit tussen :first-childen :first-of-type. Echter, net als bij :first-child, kijkt het niet naar andere voorwaarden of attributen. In HTML wordt het elementtype weergegeven door de tagnaam. In de vraag is dat type p.

Helaas is er geen vergelijkbare :first-of-classpseudo-klasse om het eerste onderliggende element van een bepaalde klasse te matchen. Op het moment dat dit antwoord voor het eerst werd gepost, de nieuw gepubliceerde FPWD van Selectors level 4 introduceerde een :nth-match()pseudo-class, ontworpen rond bestaande selector mechanica zoals ik in de eerste paragraaf al zei door een selector-list argument toe te voegen, waarmee je lever de rest van de samengestelde selector om het gewenste filtergedrag te krijgen. In de afgelopen jaren is deze functionaliteit opgenomen in :nth-child()zelf, waarbij de selectorlijst verschijnt als een optioneel tweede argument, om de zaken te vereenvoudigen en de valse indruk te voorkomen die :nth-match()overal overeenkwam het hele document (zie de laatste opmerking hieronder).

Terwijl we wachten op ondersteuning voor meerdere browsers(serieus, het is bijna 10 jaar geleden, en er is slechts één implementatie geweest in de laatste 5 van die jaren), één tijdelijke oplossing die Lea Verouen ik hebben onafhankelijk van elkaar ontwikkeld (zij deed het eerst!) is om eerst je gewenste stijlen toe te passen op alje elementen met die klasse:

/* 
 * Select all .red children of .home, including the first one,
 * and give them a border.
 */
.home > .red {
    border: 1px solid red;
}

… “ongedaan maken” vervolgens de stijlen voor elementen met de klasse die na de eerste komt, met behulp van de algemene broer/zus-combinator ~in een overschrijvende regel:

/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}

Alleen het eerste element met class="red"heeft nu een rand.

Hier is een illustratie van hoe de regels worden toegepast:

.home > .red {
    border: 1px solid red;
}
.home > .red ~ .red {
    border: none;
}
<div class="home">
  <span>blah</span>         <!-- [1] -->
  <p class="red">first</p>  <!-- [2] -->
  <p class="red">second</p> <!-- [3] -->
  <p class="red">third</p>  <!-- [3] -->
  <p class="red">fourth</p> <!-- [3] -->
</div>

Antwoord 2, autoriteit 22%

De :first-childselector is bedoeld, zoals de naam al zegt, om het eerste kind van een bovenliggende tag te selecteren. Dit voorbeeld werkt dus (probeer het gewoon hier):

<body>
    <p class="red">first</p>
    <div class="red">second</div>
</body>

Dit werkt echter niet als u uw tags onder verschillende bovenliggende tags heeft genest, of als uw tags van klasse redniet de eerste tags onder de bovenliggende tags zijn.

>

Merk ook op dat dit niet alleen van toepassing is op de eerste dergelijke tag in het hele document, maar elke keer dat er een nieuwe ouder omheen wordt gewikkeld, zoals:

<div>
    <p class="red">first</p>
    <div class="red">second</div>
</div>
<div>
    <p class="red">third</p>
    <div class="red">fourth</div>
</div>

firsten thirdzijn dan rood.

Voor jouw geval kun je de :nth-of-typeselector gebruiken:

.red:nth-of-type(1)
{
    border:5px solid red;
} 
<div class="home">
    <span>blah</span>
    <p class="red">first</p>
    <p class="red">second</p>
    <p class="red">third</p>
    <p class="red">fourth</p>
</div>

Antwoord 3, autoriteit 5%

Het juiste antwoord is:

.red:first-child, :not(.red) + .red { border:5px solid red }

Deel I: Als het element de eerste is van zijn ouder en de klasse “rood” heeft, krijgt het een rand.
Deel II: Als het “.red”-element niet het eerste is voor zijn ouder, maar onmiddellijk volgt op een element zonder klasse “.red”, verdient het ook de eer van die rand.

Fiddle of het is niet gebeurd.

Philip Daubmeier’s antwoord, hoewel geaccepteerd, is niet correct – zie bijgevoegde viool.
Het antwoord van BoltClock zou werken, maar definieert en overschrijft onnodig stijlen
(met name een probleem waarbij het anders een andere grens zou erven – u wilt andere niet declareren bij border:none)

BEWERKEN:
In het geval dat u meerdere keren “rood” volgt op niet-rood, krijgt elk “eerste” rood de rand. Om dat te voorkomen, zou men het antwoord van BoltClock moeten gebruiken. Zie viool


Antwoord 4

u kunt first-of-typeof nth-of-type(1)

gebruiken

.red {
  color: green;  
}
/* .red:nth-of-type(1) */
.red:first-of-type {
  color: red;  
}
<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

Antwoord 5

De bovenstaande antwoorden zijn te complex.

.class:first-of-type { }

Hiermee wordt het eerste type klas geselecteerd. MDN-bron

Opmerking: getest met Chrome 91 en Firefox 89, juni 2021.


Antwoord 6

Om overeen te komen met uw selector, moet het element de klassenaam redhebben en moet het het eerste onderliggende element van zijn bovenliggende element zijn.

<div>
    <span class="red"></span> <!-- MATCH -->
</div>
<div>
    <span>Blah</span>
    <p class="red"></p> <!-- NO MATCH -->
</div>
<div>
    <span>Blah</span>
    <div><p class="red"></p></div> <!-- MATCH -->
</div>

Antwoord 7

Aangezien de andere antwoorden aangeven wat er misaan is, zal ik de andere helft proberen, hoe dit op te lossen. Helaas weet ik niet dat je hier een alleen CSS-oplossing hebt, tenminste niet dat ik kan bedenken. Er zijn echter nog enkele andere opties….

  1. Wijs een firstklasse toe aan het element wanneer u het genereert, zoals dit:

    <p class="red first"></p>
    <div class="red"></div>
    

    CSS:

    .first.red {
      border:5px solid red;
    }
    

    Deze CSS komt alleen overeen met elementen met zowelfirstals redklassen.

  2. Als alternatief kunt u hetzelfde doen in JavaScript, bijvoorbeeld hier is wat jQuery zou gebruiken om dit te doen, met dezelfde CSS als hierboven:

    $(".red:first").addClass("first");
    

Antwoord 8

Ik heb deze in mijn project.

div > .b ~ .b:not(:first-child) {
	background: none;
}
div > .b {
    background: red;
}
<div>
      <p class="a">The first paragraph.</p>
      <p class="a">The second paragraph.</p>
      <p class="b">The third paragraph.</p>
      <p class="b">The fourth paragraph.</p>
  </div>

Antwoord 9

Volgens uw bijgewerkte probleem

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

hoe zit het met

.home span + .red{
      border:1px solid red;
    }

Hiermee selecteert u class home, dan het element spanen tenslotte alle .red elementendie direct na span-elementen worden geplaatst.

Referentie: http://www.w3schools.com/cssref/css_selectors.asp


Antwoord 10

Ik gebruik onderstaande CSS om een ​​achtergrondafbeelding te hebben voor de lijst ul li

#footer .module:nth-of-type(1)>.menu>li:nth-of-type(1){
  background-position: center;
  background-image: url(https://monagentvoyagessuperprix.j3.voyagesendirect.com/images/stories/images_monagentvoyagessuperprix/layout/icon-home.png);
  background-repeat: no-repeat;
}
<footer id="footer">
  <div class="module">
    <ul class="menu ">
      <li class="level1 item308 active current"></li>
      <li> </li>
    </ul> 
  </div>
  <div class="module">
    <ul class="menu "><li></li>
      <li></li> 
    </ul>
  </div>
  <div class="module">
    <ul class="menu ">
      <li></li>
      <li></li>
    </ul>
  </div>
</footer>

Antwoord 11

Je kunt je code in iets als dit veranderen om het werkend te krijgen

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

Dit doet het werk voor u

.home span + .red{
      border:3px solid green;
    }

Hier is een CSS-referentie van SnoopCodedaarover.


Antwoord 12

Je zou nth-of-type(1) kunnen gebruiken, maar zorg ervoor dat de site IE7 enz. niet hoeft te ondersteunen. Als dit het geval is, gebruik dan jQuery om body class toe te voegen en zoek het element via IE7 body class en vervolgens de naam van het element en voeg er vervolgens de nth-child styling aan toe.


Antwoord 13

Om de een of andere reden leek geen van de bovenstaande antwoorden betrekking te hebben op het geval van de echte eersteen enige eerste kindvan de ouder.

#element_id > .class_name:first-child

Alle bovenstaande antwoorden zullen mislukken als u de stijl alleen wilt toepassen op het eerste klas kind binnen deze code.

<aside id="element_id">
  Content
  <div class="class_name">First content that need to be styled</div>
  <div class="class_name">
    Second content that don't need to be styled
    <div>
      <div>
        <div class="class_name">deep content - no style</div>
        <div class="class_name">deep content - no style</div>
        <div>
          <div class="class_name">deep content - no style</div>
        </div>
      </div>
    </div>
  </div>
</aside>

Antwoord 14

Al met al, na het lezen van deze en andere pagina’s en veel documentatie. Hier is de samenvatting:

  • Voor eerste/laatstekind: nu veilig te gebruiken (ondersteund door alle moderne browsers)
  • :nth-child()Nu ook veilig te gebruiken (ondersteund door alle moderne browsers). Maar pas op dat het zelfs broers en zussen telt!Het volgende werkt dus niet goed:
/* This should select the first 2 element with class display_class
* but it will NOT WORK Because the nth-child count even siblings 
* including the first div skip_class
*/
.display_class:nth-child(-n+2){ 
    background-color:green; 
}
<ul>
   <li class="skip_class">test 1</li>
   <li class="display_class">test 2 should be in green</li>
   <li class="display_class">test 3 should be in green</li>
   <li class="display_class">test 4</li>
 </ul>

Antwoord 15

Probeer dit eenvoudig en effectief

.home > span + .red{
      border:1px solid red;
    }

Antwoord 16

Ik geloof dat het gebruik van relatieve selector +voor het selecteren van direct daarna geplaatste elementen hier het beste werkt (zoals weinigen eerder hebben gesuggereerd).

Het is in dit geval ook mogelijk om deze selector te gebruiken

.home p:first-of-type

maar dit is de elementselector en niet de klasse.

Hier heb je een mooie lijst met CSS-selectors: https://kolosek.com/css-selectors/


Antwoord 17

Probeer deze oplossing:

.home p:first-of-type {
  border:5px solid red;
  width:100%;
  display:block;
}
<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

Antwoord 18

Kun je zoiets proberen:

.red:first-of-type {
    border: 5px solid red;
}

je kunt dit ook gebruiken voor het laatste element (als je het nodig hebt):

.red:last-of-type {
    border: 5px solid red;
}

Antwoord 19

Ik denk dat veel mensen het al hebben uitgelegd. uw code selecteert alleen het eerste kind van de eerste instantie. Als je alle eerste kinderen van de rode klas wilt selecteren, moet je

.home > .red:first-child {
    /* put your styling here */
}

LEAVE A REPLY

Please enter your comment!
Please enter your name here

six − 4 =

Other episodes