Псевдоклассы для дочерних элементов

Псевдокласс only-child (единственный из выбранного типа дочернего элемента)

Примените следующий стиль к HTML-коду, который дан в самом начале .

a:only-child {

 

border: 2px solid black;

}

Как вы видите, селектор выбрал два <a>-элемента, каждый из которых вложен в элемент «список» li.

Почему так и как это работает: only child дословно переводится как «единственный ребёнок / единственный дочерний элемент», поэтому селектор выбирает только те <a>-элементы, у которых родительский элемент имеет только один дочерний элемент —<a>. В нашем случае каждый li имеет по одному родительскому и по одному дочернему элементу, поэтому они и были выбраны.

Почему не выбран <a>-элемент, единственный дочерний элемент <a> ненумерованного списка ul? Ответ прост: несмотря на то, что он является единственным дочерним <a>-элементом, у него есть ещё два соседа, не являющихся элементами <a>, для которых ul является родительским. Получается три дочерних элемента, что, разумеется, не попадает под наше правило: один родительский элемент — один дочерний.

Псевдокласс first-child (первый дочерний элемент)

Примените следующий стиль:

a:first-child {

border: 2px solid black;

}

Селектор first-child выбирает все первые дочерние элементы <a> своих родителей. Следует помнить, что он выбирает только первые дочерние <a>-элементы. Это означает, что элемент <a> должен занимать первую позицию в своей секции, а не быть первым после какого-либо другого дочернего элемента.

Если вы не поняли, почему первый дочерний <a>-элемент в body не был выбран, то сейчас объясню. Дело в том, что он является первым только среди дочерних <a>-элементов в этой секции. Среди всех дочерних элементов он — второй, так как первый — это контейнер с классом main.

Псевдокласс last-child (последний дочерний элемент)

Думаю, что после всего материала, который мы изучили, вы примерно понимаете, как работает этот селектор. Если нет — объясняю: last-child выбирает последний элемент <a> в каждой секции. Правило прежнее: <a>-элемент должен быть именно первым в списке всех дочерних элементов, иначе он не будет выбран.

Обратите внимание на схему после кода.

a:last-child {

border: 2px solid black;

}

 

Псевдокласс nth - child (n-й дочерний элемент)

Обратите внимание на следующий пример:

a:nth-child(1) { 

border: 2px solid black;

}

Всё работает так же, как и с селектором nth-of-type.

Чтобы начать использовать nth-child, нужно повторить все те действия, которые мы произвели с селектором nth-of-type — поместить в скобки любое число. В примере выше селектор сработает точно так же, как и first-child — выберет все первые элементы <a> в секциях.

Псевдокласс nth-last-child (n-й дочерний элемент с конца)

Этот селектор работает точно так же, как и :nth-child, за исключением одной тонкости: он видит и читает дерево DOM в обратном направлении — справа налево.

Дочерние элементы в каждой секции для этого селектора выстраиваются в ряд справа налево.

a:nth-last-child(1) { 

border: 2px solid black;

}

Обратите внимание на то, как расположены и выбраны дочерние элементы на схеме:

CSS3-переходы

CSS3-переходы позволяют анимировать исходное значение CSS-свойства на новое значение с течением времени, управляя скоростью смены значений свойств.

Смена свойств происходит при наступлении определенного события, которое описывается соответствующим псевдоклассом. Чаще всего используется псевдокласс :hover.

Переходы применяются ко всем элементам.

Для задания всех свойств обычно используют краткую запись свойства transition.

⇐ Предыдущая123

Поделиться: