Кратко о :first-of-type, :nth-of-type и :not

Псевдоэлементы

1	:first-of-type

и

1	:last-child

Псевдоэлемент

1	:first-of-type

служит для выборки дочернего элемента определенного типа.

Можно сказать, что псевдоэлемент

1	:first-of-type

является частным случаем псевдоэлемента

1	:first-child

. Если псевдоэлемент

1	:first-child

выполняет выборку первого дочернего элемента вне зависимости от его типа, то псевдоэлемент

1	:first-of-type

осуществляет выборку первого дочернего элемента только указанного типа (если этот элемент отвечает заданному условию - типу элемента).

Аналогично работает псевдоэлемент

1	:last-of-type

, только применяется к последнему дочернему элементу определенного типа. Более общим случаем является псевдоэлемент

1	:last-child

.

Псевдоэлементы

1	:last-child

,

1	:nth-child()

,

1	:first-of-type

НЕ ПОДДЕРЖИВАЮТСЯ IE8.

Пример:

.fofo p:first-of-type{}

… в примере тег

1

p

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

1

p

, родителем которого является элемент с классом

1

.fofo

.

.wowo p:last-of-child{}

Выбрать последний дочерний элемент типа

1

p

, родителем которого является элемент с классом

1

.wowo

.

Рабочий пример приведен ниже. Два одинаковых списка. К первому применен псевдоэлемент

1	:first-of-type

, ко второму - псевдоэлемент

1	:first-child

.

В первом случае выбран первый параграф списка, так как в выражении указано выбрать именно первый дочерний элемент списка, являющийся параграфом

1

p

:

.fofo p:first-of-type{
  font-weight: bold;
  color: #222;
  font-variant: small-caps;
  text-shadow: 1px 1px 1px #999;
}

Во втором случае к списку применен псевдоэлемент

1	:first-child

и в этом случае был отобран первый элемент указанного списка - ссылка

1

a

! А то, что этот элемент является ссылкой, а не параграфом

1

p

, роли не играет - тип элемента не был указан:

.wowo :first-child{
  font-size: 14px;
  font-style: italic;
  color: green;
  font-weight: bold;
}

Псевдоэлемент

1	:last-of-child

и его общий случай

1	:last-child

разбирать смысла нет, так как выборка элемента из HTML-документа осуществляется аналогично с тем лишь различием, что применяется не к первому, а последнему дочернему элементу.

Псевдоэлемент

1	:nth-of-type

Псевдоэлемент

1	:nth-of-type

является частным случаем псевдоэлемента

1	:nth-child

. В случае с

1	:nth-of-type

выборка элементов производится не только по порядковому номеру, но и по типу элемента.

Например,

1	p img:nth-of-type(odd){float: left}

и

1	p img:nth-of-type(even){float: right}

делает выборку четных и нечетных порядковых номеров только элементов

1

img

.

Отбираются все дочерние по отношению к

1	.nthOfType

элементы типа

1

img

, нечетные по порядковому номеру. И применяются к нему правила - смещение влево,

1	margin-right

и тень справа:

.nthOfType img:nth-of-type(odd){
  float: left;
  margin: 0 10px 0 0;
  box-shadow: 3px 3px 3px rgba(0,0,0,.65);
}

Отбираются все дочерние по отношению к

1	.nthOfType

элементы типа

1

img

, четные по порядковому номеру. И применяются к нему правила - смещение право,

1	margin-left

и тень слева:

.nthOfType img:nth-of-type(even){
  float: right;
  margin: 0 0 0 10px;
  box-shadow: -3px 3px 3px rgba(0,0,0,.65);
}

Псевдокласс :not

Псевдокласс

1

:not

(псевдокласс отрицания) - выбрать все элементы

1

p

, у которых НЕТ класса

1

.classy

и применить к ним следующие свойства: цвет и тень. Другими словами, выборка элементов с помощью псевдокласса

1

:not

производится от обратного - “выбрать все элементы, которые НЕ ОТВЕЧАЮТ следующему условию.”

Этот псевдокласс является антагонистом обычного условия - “если удовлетворяет условию, то примени такое-то свойство”:

<p class="classy">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.
</p>

.dodo p:not(.classy){
  color: blue;
  text-shadow: 1px 1px 1px rgba(0,0,255,.2);
}

На этом все.

---