Селектор для n-го и m-го элемента sibling?

Question

С CSS3, я хочу получить именно первый и четвертый родственные элементы - и только эти два. Не удалось найти рабочий селектор :nth-of-type(an+b), так как я не после каждый a-й элемент, но я ищу только два элемента.

:nth-of-type(1), // :first-of-type wouldn't work either, 
:nth-of-type(4){ 
    ... 
} 

не будет работать, так как последний селектор отменяет первый селектор. Кажется, что последний подход выбора селектора nth-of-type действует.

Как я могу выбрать как первый, так и четвертый элемент родства с CSS3?

Answer 1

При использовании :nth-of-type ему нужен тип или класс, например div:nth-of-type или .block:nth-of-type.

div:nth-of-type(1), 
 
div:nth-of-type(4){ 
 
    color: lime; 
 
} 
 

 
.block:nth-of-type(1), 
 
.block:nth-of-type(4){ 
 
    color: red; 
 
} 
 

 
/* for styling purpose */ 
 
div + span { margin-top: 20px; } 
 
.block { display: block; }

<div>Hey there div</div> 
 
<div>Hey there div</div> 
 
<div>Hey there div</div> 
 
<div>Hey there div</div> 
 
<div>Hey there div</div> 
 

 
<span class="block">Hey there div</span> 
 
<span class="block">Hey there div</span> 
 
<span class="block">Hey there div</span> 
 
<span class="block">Hey there div</span> 
 
<span class="block">Hey there div</span>

Answer 2

Селектор, который вы размещаете, кажется, работает нормально

div:nth-of-type(1), 
 
div:nth-of-type(4){ 
 
    background-color: red; 
 
}

<div>1</div> 
 
<div>2</div> 
 
<div>3</div> 
 
<div>4</div> 
 
<div>5</div> 
 
<div>6</div> 
 
<div>7</div>

Если вы хотите, чтобы это было сделано только в одном селекторе, это будет его

Первого элемента выбор (при п = 0) является четвёртым, то первым, а затем перейти к отрицательным числам

div:nth-of-type(-3n+4){ 
 
    background-color: red; 
 
}

<div>1</div> 
 
<div>2</div> 
 
<div>3</div> 
 
<div>4</div> 
 
<div>5</div> 
 
<div>6</div> 
 
<div>7</div>