• 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
46 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 (69,550 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 (69,550 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 93 wizyt
pytanie zadane 27 sierpnia 2018 w JavaScript, jQuery, AJAX przez bulit000 Początkujący (450 p.)
Porady nie od parady
Możesz ukryć, zamknąć lub zmodyfikować swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.Przyciski pytania

65,815 zapytań

112,468 odpowiedzi

237,631 komentarzy

46,737 pasjonatów

Przeglądających: 153
Pasjonatów: 14 Gości: 139

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.

...