• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

CSS3 - :nth-child() Selector - głębiej

0 głosów
47 wizyt
pytanie zadane 12 maja w HTML i CSS przez yato94 Nowicjusz (140 p.)

Cześć! 

Czy jest opcja w CSS3 żebym potraktował deklaracją tylko 1sze dziecko 1szego dziecka? Chodzi mi o użycie CSS :first-child Selector 

Przykład:

<ul class="lista">
    <li class="punkt_listy"></li>
        <div class="punkt_holder"></div>
        <div class="punkt_holder"></div>
    <li class="punkt_listy"></li>
        <div class="punkt_holder"></div>
        <div class="punkt_holder"></div>
    <li class="punkt_listy"></li>
        <div class="punkt_holder"></div>
        <div class="punkt_holder"></div>
</ul>

Jeśli chciałbym zmienić tło dla pierwszego elementu listy wystarczy że użyje:

ul:first-child {
background-color: red;
}

ale czy jest opcja żebym tym sposobem ustalił tło  <div class="punkt_holder"></div> tylko dla pierwszego elementu listy?

 

Z góry uprzejmie dziękuje za odpowiedzi doświadczonych kolegów :)

1 odpowiedź

+2 głosów
odpowiedź 12 maja przez Chess Maniak (70,870 p.)
edycja 12 maja przez Chess
ul:first-child > li:first-child {
   background: orange;
}

ul:first-child li:first-child {
   background: green;
}

ul:first-child:first-child {
   background: yellow;
}

#the-first-child-pseudo#flow-content.

Są lepsze źródła niż w3schools. /w3schools-nie-szerzmy-falszywej-propagandy.

Chciałem jeszcze wspomnieć, że element li może być wyłącznie w takich elementach jak ol lub ul. Nie możesz tam umieścić div czy span. Odsyłam do dokumentacji:

4.4.7 The li element

Categories:

None.

Contexts in which this element can be used:

Inside ol elements.

Inside ul elements.

#the-li-element/Element/li.

ul, ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul > ol:first-child li:first-child {
  background-color: orange;
}
ul > ol:first-child:first-child {
  background-color: green;
}
<body style="background: darkolivegreen;">

<ul>
  <ol>
    <li>1</li>
    <li>2</li>
    <ol>
      <li>x</li>
      <li>y</li>
    </ol>
  </ol>
  <ol>

  <ol>
    <li>1</li>
    <li>2</li>
  </ol>
</ul>

</body>
komentarz 12 maja przez yato94 Nowicjusz (140 p.)

Chess, dziękuje za odpowiedź, 

Nie do końca o to mi chodziło, ale pewnie moje pytanie też nie było precyzyjne. Dopiero zaczynam z CSS3 ale tak się wkręciłem żeby przerobić taki jeden element, że nie może mi to wyjść z głowy! nie mogę zasnąć! 

Spróbuje jeszcze raz, mamy listę wielopoziomową:

<ul>
    <li>pierwszy poziom
        <ul>
            <li>drugi poziom1</li>
            <li>drugi poziom2</li>
        </ul>
    </li>
    <li>pierwszy poziom2
        <ul>
            <li>drugi poziom2/1</li>
            <li>drugi poziom2/2</li>
        </ul>
    </li>
<ul>

I teraz za pomocą :nth-child() chciałbym zrobić background-color tylko dla ''drugi poziom 2/2 - czyli drugie dziecko drugiego dziecka :) 

komentarz 12 maja przez Chess Maniak (70,870 p.)
edycja 12 maja przez Chess
ul > li:nth-child(2) li:nth-child(2) {
  background: orange;
}

ul > li:last-child li:last-child {
  background: green;
}

Jeśli chodzi o ostatni przykład w tym poście, to ul jest rodzicem li. Li ostatnie w ul jest rodzicem ostatniego li, który jest właśnie w ostatnim li.

Ogólnie jeśli napiszesz np. tak li:nth-child(2n), to będziesz mieć tylko z'match'owane (dopasowane) parzyste elementy.

komentarz 12 maja przez yato94 Nowicjusz (140 p.)
Dokładnie o to mi chodziło! GJENIUSZ EUGENIUSZ!

Dzięki serdeczne ojciec!

Podobne pytania

0 głosów
1 odpowiedź 52 wizyt
pytanie zadane 6 czerwca w HTML i CSS przez Rozukee Początkujący (300 p.)
+1 głos
1 odpowiedź 79 wizyt
pytanie zadane 25 października 2016 w HTML i CSS przez tirex Gaduła (4,320 p.)
0 głosów
2 odpowiedzi 94 wizyt
pytanie zadane 27 sierpnia 2018 w JavaScript, jQuery, AJAX przez bulit000 Początkujący (450 p.)
Porady nie od parady
Nie wiesz jak poprawnie zredagować pytanie lub pragniesz poznać którąś z funkcji forum? Odwiedź podstronę Pomoc (FAQ) dostępną w menu pod ikoną apteczki.FAQ

66,384 zapytań

113,133 odpowiedzi

239,497 komentarzy

46,640 pasjonatów

Przeglądających: 155
Pasjonatów: 0 Gości: 155

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...