Голосовое произношение на английском языке названий псевдоклассов каскадных таблиц стилей. Страница 5.
:indeterminate псевдокласс, находит элементы в в неопределенном состоянии. - Пример: input:indeterminate { background: lime; }
:fullscreen псевдокласс, применяется к элементам, когда браузер находится в полноэкранном режиме. - Пример: #fs-toggle:fullscreen { background-color: #faa; }
:target псевдокласс, применяется к целевому элементу, который указан в адресной строке браузера.
:empty псевдокласс, находит пустые элементы, такие, которые не содержат дочерних элементов, текста, пробелов или переносов строк. - Пример: span:empty {background: red; padding: 3px; display: inline-block;} /* Найдет в html соде все путые парные теги span и присвоит им указанные стили */
| Мир: | 2200 7704 4708 4353 |
| Яндекс: | 41 00 11 25 13 54 962 |
| Киви: | ALEKS33550336 |
:blank псевдокласс, находит элементы, у которых либо вообще нет дочерних узлов, либо только пустые текстовые узлы, либо только текстовые узлы, содержащие только пробельные символы. По своему действию похож на :empty, но :blank, в отличие от него, считает пустыми элементы, содержащие пробел или перенос строк. Пример: span:blank {background: red; padding: 3px; display: inline-block;} /* Рабочий проект, браузерами не поддерживается */
:focus псевдокласс, определяет стиль для элемента, получающего фокус. - Пример: .form:focus { border: 1px solid #29B0D9; }
:focus-within псевдокласс, определяет стиль элемента, когда он сам или элементы внутри него получают фокус. В отличие от :focus, который применяется непосредственно к самому элементу, :focus-within работает для родителя. - Пример: div:focus-within { background: #DEF0E7; }
:lang псевдокласс, определяет язык, который используется в документе или его фрагменте, с его помощью можно задавать определённые настройки, характерные для разных языков - Пример: q:lang(en) { quotes: "201C" "201D"; } /* Вид кавычек для английского языка */
:not псевдокласс, задаёт правила стилей для элементов, которые не содержат указанный селектор. В качестве селектора могут указываться теги, идентификаторы, классы и селекторы атрибутов.- Пример: input:not([type="submit"]) { border: 1px solid #ccc; }
nth употребляется:
1. для описания последних в длинном ряду вещей, предметов и т.п., когда вы не знаете их точное колличество;
2. в качестве приставки у псевдо-классов в CSS которые используется для добавления стиля к элементам на основе нумерации в дереве элементов.
CSS псевдо-класс :indeterminate находит элементы в неопределённом состоянии. Под это определение попадают следующие элементы:
input type="checkbox", свойство indeterminate которых было установлено в true через JavaScript;input type="radio", когда все радио переключатели в одной группе (с одинаковым атрибутом name) невыбраны;progress в неопределённом состоянии.
<div>
<input type="checkbox" id="checkbox">
<label for="checkbox">Эта метка будет зелёной.</label>
</div>
<div>
<input type="radio" id="radio">
<label for="radio">Эта метка будет зелёной.</label>
</div>
input:indeterminate + label {
background: lime;
}
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].indeterminate = true;
}
Целевой элемент (target item) — Элемент, в котором обнаружена указанная характеристика.
Целевой элемент в HTML, CSS — идентификатор, который указан в адресной строке браузера.
В адресе http://www.example.com/index.html#section2 происходит переход к элементу, атрибут id которого задан как section2. Такая запись адреса называется «целевой элемент». Псевдокласс :target применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера. Пример:
/* Выбирает элемент с подходящим ID текущего URL-фрагмента */
:target
{
border: 2px solid black;
}
http://www.example.com/index.html#section2
Следующий элмент будет выбран селектором :target, если текущий URL равен вышеуказанному:
<section id="section2">Example</section>