Псевдокласс :nth-of-type [7/20]. Насколько критична разница кода?


#1

Какова разница написания кода и почему?

Вариант 1:

ul:nth-of-type(even) li {
background-color: #ff3300;
}

ul:nth-of-type(3) li:nth-of-type(3) {
background-color: #339933;
}

ul:nth-of-type(1) li:nth-of-type(odd) {
background-color: #0099ff;
}

Вариант 2:

ul:nth-of-type(2n) li {
background-color: #ff3300;
}

ul:nth-of-type(3) li:nth-child(3) {
background-color: #339933;
}

ul:nth-of-type(1) li:nth-child(2n+1) {
background-color: #0099ff;
}


#2

Ну в данном случае никакой, а если вы зададите в этом задании для ul :nth-child, а не nth-of-type, то увидите разницу(именно для этого и добавили вверху < div >, чтобы вы увидели). :nth-of-type задает стиль с учетом типа элемента (т.е. < ul >), а nth-child не волнует тип элемента.


#3

Я так понимаю возможно огромное кол-во вариантов.


ul:nth-child(2n+3) li{
    background-color: #ff3300;
}

ul:nth-child(4) li:nth-child(3) {
    background-color: #339933;
}

ul:first-of-type li:nth-of-type(2n+1) {
    background-color: #0099ff;
}

#4

Да, но зачем писать: li:nth-of-type если этот li является первым элементом у родителя ul???
P.S. Считаю это не правильным!