Псевдоклассы пользовательского интерфейса

В основном относятся к элементам форм.

· :disabled — используется для отбора и стилизации заблокированных для выбора и изменения элементов форм;

· :enabled — отбирает не заблокированные для выбора и изменения элементы форм;

· :checked — применяется для выбора и стилизации элементов <input type="radio">, <input type="checkbox">, а также элементов <option></option>, находящихся внутри элемента <select></select>;

 

Псевдокласс отрицания :not()

Функциональный селектор псевдокласса :not(), который принимает в качестве значения простой селектор, а затем отбирает элементы, которые не содержат указанное значение аргумента.

Значениями аргументов могут быть только следующие:

· селекторы элемента, например, div:not(strong)

· селекторы класса и идентификатора, например, p:not(.text)

· селекторы псевдокласса, например, ul:not(:first-child)

· селекторы атрибута, например, input:not([type="checkbox"])

Вот наглядный пример:

<ul>

<li>Lorem, ipsum.</li>

<li class="active">Rerum, eos!</li>

<li>Possimus, soluta!</li>

<li>Autem, nam?</li>

</ul>

<style>

li:not(.active){

background-color: grey;

}

</style>

В этом примере, фон серого цвета будет у всех элементов ли, кроме тега с class =" active "

Структурные псевдоклассы

Псевдокласс only-of-type (единственный из выбранного типа)

Для всех псевдоклассов действует один и тот же формат:

выбираемый-элемент:селектор { /* стиль */ }

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

Обратите внимание на пример:

a:only-of-type {

border: 2px solid black;

}

В приведённом коде выбираемый элемент — тег <a>, а его селектор — one-of-type.

Начнём с того, что выберем всё, что есть в DOM, а затем отфильтруем.

Так как в нашем случае выбираемым элементом являются элементы <a>, то мы можем сделать следующее:

Мы выбрали все элементы <a> в каждой секции и последовательно их пронумеровали слева направо. Не забывайте, что порядок очень важен.

Теперь мы завершаем часть работы, связанную с выбираемым элементом, и приступаем к фильтрации.

Only-of-type проходит через все секции, выбирая только те элементы <a>, которые являются единственными для своей секции.

Обратите внимание, что <a>-элементы для первой и второй секций не были выбраны из-за того, что они не являются единственными для своих секций. Иначе говоря: одна секция — один элемент <a>.

Псевдокласс first-of-type (первый из выбранного типа)

Селектор first-of-type выбирает каждый первый элемент <a> в секции.

Код, который выполняет условия приведённой справа схемы:

a:first-of-type {

border: 2px solid black;

}

Псевдокласс last-of-type (последний из выбранного типа)

Last-of-type — полная противоположность псевдокласса first-of-type.

Псевдокласс nth-of-type (n-й из выбранного типа)

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

a:nth-of-type(1) {

border: 2px solid black;

}

Вместо nth подставьте число из скобок в порядковой форме, чтобы прочитать правильно селектор.

Итак, давайте вернёмся к селектору. a:nth-of-type(1) может читаться точно так же, как и a:first-of-type. В данном случае эти селекторы работают одинаково: каждый из них выбирает только те элементы <a>, которые являются первыми в своих секциях.

А если мы пойдём немного глубже и напишем следующее условие:

a:nth-of-type(2) {

border: 2px solid black;

}

то селектор выберет каждый второй элемент <a> в первой и во второй секциях.

⇐ Предыдущая123Следующая ⇒

Поделиться: