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

CSS -> Czy da się pominąć niepowiązane divy z :nth-of-type?

VPS Starter Arubacloud
+1 głos
145 wizyt
pytanie zadane 21 września 2021 w HTML i CSS przez Doge Gaduła (3,420 p.)

Witam, czy da się zrobić tak, aby :nth-of-type zaznaczał tylko divy o podanej klasie? np.

.field-card .string:nth-of-type(odd)

zaznaczy tylko divy w .field-card o klasie .string nieparzyste. Ponieważ kiedy przed divy .string dodam diva o innej klasie, to wtedy :nth-of-type się psuje i muszę zapisywać na odwrót - że parzyste są nieparzyste. Poniżej jest kod działający, ale nielogiczny, ponieważ pierwszy div o klasie .string jest zapisany jako parzysty, drugi jako nieparzysty itd.

<div class="field-card">
                <div class="color-of-card"></div>
                <div class="string">Czynsz</div> <div class="string">cena </div>
                <div class="string">Z 1 domem</div> <div class="string">cena </div>
                <div class="string">Z 2 domami</div> <div class="string">cena </div>
                <div class="string">Z 3 domami</div> <div class="string">cena </div>
                <div class="string">Z 4 domami</div> <div class="string">cena </div>
                <div class="string">Z hotelem</div> <div class="string">cena </div>
            </div>
.field-card
{
    width: 60%;
    height: 85%;
    background-color: lightgreen;
    display: flex;
    flex-wrap: wrap;
}
.field-card .string:nth-of-type(odd)
{
    text-align: right;
    width: 25%;
}
.field-card .string:nth-of-type(even)
{
    text-align: left;
    width: 75%;
}
.color-of-card
{
    width: 100%;
    height: 2rem;
    border-bottom: 2px solid black;
    background-color: red;
}

 

1 odpowiedź

0 głosów
odpowiedź 21 września 2021 przez VBService Ekspert (255,440 p.)
wybrane 21 września 2021 przez Doge
 
Najlepsza

Spróbuj sztuczki z "n" i wyrażenia algebraicznego, które reprezentuje.

"n" i wyrażenia algebraicznego, które reprezentuje

 

Pomyśl o „n” jako o początku od zera, a następnie zbiorze wszystkich dodatnich liczb całkowitych. Następnie uzupełnij wyrażenie. Zatem np.: 3n to „3xn”, a całe wyrażenie razem to „(3xn)+3”. Teraz podstawiamy w zero i dodatni ...

 

dla

<div class="field-card">
  <div class="color-of-card"></div>
 
  <div class="string">Czynsz</div> <div class="string">cena </div>
  <div class="string">Z 1 domem</div> <div class="string">cena </div>
  <div class="string">Z 2 domami</div> <div class="string">cena </div>
  <div class="string">Z 3 domami</div> <div class="string">cena </div>
  <div class="string">Z 4 domami</div> <div class="string">cena </div>
  <div class="string">Z hotelem</div> <div class="string">cena </div>
</div>

mamy

.field-card .string:nth-of-type(2n+1)
{
    text-align: right;
    width: 25%;
    background-color: green;
}
.field-card .string:nth-of-type(2n+2)
{
    text-align: left;
    width: 75%;
}

 

i analogicznie dla

<div class="field-card">
  <div class="color-of-card"></div>
  <div class="color-of-card"></div>
  
  <div class="string">Czynsz</div> <div class="string">cena </div>
  <div class="string">Z 1 domem</div> <div class="string">cena </div>
  <div class="string">Z 2 domami</div> <div class="string">cena </div>
  <div class="string">Z 3 domami</div> <div class="string">cena </div>
  <div class="string">Z 4 domami</div> <div class="string">cena </div>
  <div class="string">Z hotelem</div> <div class="string">cena </div>
</div>

mamy

.field-card .string:nth-of-type(2n+2)
{
    text-align: right;
    width: 25%;
    background-color: green;
}
.field-card .string:nth-of-type(2n+3)
{
    text-align: left;
    width: 75%;
}

itd.

Podobne pytania

0 głosów
0 odpowiedzi 88 wizyt
pytanie zadane 2 kwietnia 2017 w HTML i CSS przez mowmiheniek Stary wyjadacz (11,900 p.)
0 głosów
1 odpowiedź 187 wizyt
+1 głos
1 odpowiedź 194 wizyt
pytanie zadane 20 września 2021 w HTML i CSS przez Doge Gaduła (3,420 p.)

92,845 zapytań

141,784 odpowiedzi

320,859 komentarzy

62,178 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...