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

Reading time ~6 minutes

Псевдоэлементы
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;
}

Псевдоэлемент :first-of-type

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

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

Псевдоэлемент :nth-of-type

Псевдокласс :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);
}

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

На этом все.


MongoDB - создание документа

![MongoDB]({{site.url}}/images/uploads/2017/05/mongodb-logo.jpg "MongoDB")Приступили к самому основному - операциям создания, чтения, изм...… Continue reading

MongoDB - документы

Published on May 23, 2017