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

pytanie zadane 12 maja 2019 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ź

odpowiedź 12 maja 2019 przez Chess Szeryf (76,710 p.)
edycja 12 maja 2019 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 2019 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 2019 przez Chess Szeryf (76,710 p.)
edycja 12 maja 2019 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 2019 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ź 176 wizyt

Co to nth-child

pytanie zadane 6 czerwca 2019 w HTML i CSS przez Rozukee Początkujący (300 p.)

+1 głos

1 odpowiedź 186 wizyt

CSS -> Selektor :nth-child mi nie działa

pytanie zadane 20 września 2021 w HTML i CSS przez Doge Gaduła (3,370 p.)

0 głosów

1 odpowiedź 157 wizyt

Czy da sie uzyc nth-child w frameworku vue z uzyciem js a ?

pytanie zadane 20 stycznia 2021 w JavaScript przez rollo_jx Nowicjusz (120 p.)

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

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci