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

Question

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;
}

 

Answer 1

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.