После CSS 2.1 W3C добавил целый ряд новых селекторов, чтобы помочь нам нацеливать элементы уникальными способами. Почти все эти селекторы имеют отличную поддержку браузера, поэтому вы можете — и, вероятно, должны — уже использовать их.
Если вы не слишком знакомы с ними, эта статья даст вам обзор этих селекторов CSS3, который я хотел бы назвать «текущим поколением» селекторов CSS. Где применимо, я включил простую встроенную демонстрацию, демонстрирующую селектор.
Целевой псевдокласс
Псевдокласс :target Если это звучит странно, давайте посмотрим на пример. Вот URL, который будет отображаться в адресной строке:
http://www.sitepoint.com/example-page/#section-1
Этот URL-адрес предназначен для элемента с идентификатором «section-1», который прокручивает страницу до этого места. Скорее всего, вы уже делали это раньше, используя то, что неофициально можно назвать внутристраничными или локальными ссылками.
Когда вы объявляете псевдокласс :target:target
:target {
background-color: yellow;
color: black;
}
В этом случае селектор :target Однако мы могли бы ограничить его только определенными элементами:
p:target {
background-color: yellow;
color: black;
}
Вы, вероятно, уже видели этот селектор в действии в ссылках на сноски в Википедии , как показано на скриншоте ниже:
: enabled и: disabled псевдоклассы
Элементы пользовательского интерфейса могут существовать в разных «состояниях». Два из этих состояний включены и отключены . Хотя это не ограничивается элементами формы, скорее всего, именно так вы узнаете концепцию включенных и отключенных.
CSS теперь включает псевдоклассы для стилизации элементов на основе двух вышеупомянутых состояний:
input:enabled {
background: white;
border: solid 1px #000;
}
input:disabled {
background: #ccc;
border: solid 1px #aaa;
}
Это облегчает пользователям различать то, что кликабельно, и то, что нет. Состояние «отключено» идентифицируется в элементах формы путем добавления логического атрибута «отключено». Многие браузеры автоматически стилизируют элементы особым образом, когда этот атрибут присутствует, но, используя этот псевдокласс, вы можете добавить свои собственные стили при желании.
: checked и: неопределенные псевдоклассы
Подобно включенному / отключенному, элементы-флажки и переключатели в формах могут иметь два основных состояния: выбрано (или «отмечено») и не выбрано (или «не отмечено»). CSS позволяет стилизовать элементы в этих состояниях с помощью псевдокласса :checked
:checked {
margin-left: 20px;
}
Подобно включенному / отключенному, его можно изменить с помощью атрибутов «флажок» или «выбран» в HTML.
Однако для таких элементов существует другое состояние: «неопределенное» состояние. Это состояние существует, если пользователь еще не воздействовал на элемент, таким образом, элемент не был явно установлен ни отмеченным, ни отмеченным. Псевдокласс :indeterminate
: nth-child () псевдокласс
Этот псевдокласс имеет полный набор возможностей, определяемых значением или выражением, которое вы вставляете в скобки. Простой способ использовать это через целочисленное значение или нечетные или четные ключевые слова:
div:nth-child(1) {
background: #eee;
}
tr:nth-child(odd) {
background: #bbb;
}
Первое правило, заданное в приведенном выше примере, будет стилизовать любой элемент <div> То есть ни один элемент не появляется перед ним внутри своего родителя.
Во втором наборе правил мы нацеливаемся на все нечетные элементы <tr> Это позволяет легко выполнять зебра на таблицах, не прибегая к JavaScript или жесткому кодированию нескольких классов в HTML.
В дополнение к этим простым значениям псевдокласс :nth-child()выражение в качестве значения :
li:nth-child(4n+2) {
background: #ccc;
}
В этом примере мы добавляем цвет фона к набору указанных элементов списка. Но какие элементы? В этом конкретном случае (4n + 2) выражение переводится в:
Выберите 2-й элемент списка и каждый 4-й элемент после этого
И это будет применяться отдельно к каждому списку. Таким образом, если у вас есть 3 списка на одной странице HTML, этот селектор выберет второй элемент в каждом из этих списков, а также каждый четвертый элемент после 2-го элемента в каждом списке. Таким образом, отсчет начинается заново для каждого набора целевых элементов внутри соответствующего родителя.
Вы также можете использовать отрицательное целое число для любого значения. Давайте попробуем отрицательное целое число в части выражения, которая определяет первый выбранный элемент:
li:nth-child(4n-1) {
background: #ccc;
}
В этом случае первым элементом, к которому применяется цвет фона, будет третий фактический элемент списка. Это из-за отрицательного значения (-1). Подсчет 4 элементов после теоретического -1-го значения приводит нас к 3-му значению (которое включает в себя подсчет теоретического «нулевого» значения по пути).
Однако использование отрицательного значения в первой части выражения приводит к тому, что элементы выбираются в обратном порядке, начиная с первого выбранного элемента, например:
li:nth-child(-4n+5) {
background: #ccc;
}
Это выражение выбирает 5-й элемент, а также каждый 4-й элемент до этого элемента. Это означает, что ничего не выбирается после 5-го элемента.
Вы определенно захотите поиграть с этими выражениями, используя как положительные, так и отрицательные значения для обеих сторон уравнения, чтобы получить хорошее представление о том, как они работают на практике.
: nth-last-child (),: nth-of-type (),: nth-last-of-type ()
Следующие три псевдокласса работают точно так же, как :nth-child() Но у каждого из них разные предпосылки:
-
:nth-last-child() -
:nth-of-type()p:nth-of-type(3) -
:nth-last-of-type()Выбирает начиная с последнего элемента указанного типа.
псевдо-классы: first-child и: last-child
Эти селекторы довольно понятны. Они выбирают элементы, которые являются первым или последним дочерним элементом их родительского элемента. Например, если у вас есть четыре набора неупорядоченных списков на странице, мы могли бы применить следующий CSS:
li:first-child {
background: #444;
color: white;
}
li:last-child {
background: #555;
color: #ccc;
}
Для каждого отдельного списка первый и последний элементы списка будут оформлены так, как указано, но другие элементы списка не будут затронуты.
: first-of-type и: last-of-type
Аналогично :first-child:last-child
p:first-of-type {
margin-top: 3em;
}
p:last-of-type {
margin-top: 0;
}
В приведенном выше примере рассматриваемая страница может иметь другие элементы до или после абзацев. Эти элементы будут игнорироваться, и только первый и последний абзацы будут выделены и стилизованы.
: only-child и: only-of-type
Эти два селектора выбираются в зависимости от того, является ли указанный элемент единственным или единственным дочерним элементом этого типа. Например:
li:only-child {
background: goldenrod;
}
p:only-of-type {
margin: 20px;
}
В первом наборе правил элемент списка будет стилизован, только если он является единственным элементом списка в списке. Если в списке два или более элементов списка, стили не будут применяться.
Аналогично, второй набор правил будет применять свои стили только в том случае, если указанный тип элемента (в данном случае абзац) является единственным его типом внутри родительского элемента. Внутри родительского элемента может быть элемент другого типа (например, <section><img> Если имеется более одного элемента абзаца, ни один элемент не получит стили.
: пустой
Псевдокласс: empty выбирает элемент, если у него нет дочерних элементов. Возьмите следующий фрагмент HTML:
<p>Example paragraph.</p>
<p></p>
<p>Example paragraph.</p>
А потом следующий CSS:
p:empty {
display: none;
}
Объявление display: none<p> Это потому, что у него нет детей (то есть он пуст).
:: первая буква и :: псевдоэлементы первой строки
Эти селекторы называются псевдоэлементами. Они выбирают мнимые или подразумеваемые элементы на странице. Псевдоэлемент :first-letterэффекта буквицы :
p {
font-family: Georgia, sans-serif;
font-size: 1.5em;
}
p:first-of-type::first-letter {
float: left;
color: goldenrod;
font-size: 90px;
line-height: 70px;
padding-right: 7px;
font-family: Georgia;
}
В этом примере все элементы абзаца имеют несколько универсальных стилей ( fontfont-size Но затем мы объединяем псевдокласс ( :first-of-type::first-letter
Псевдоэлемент ::first-line
p:first-of-type::first-line {
text-transform: uppercase;
}
И имейте в виду, что если ширина элемента является гибкой, браузер всегда гарантирует, что независимо от того, какого размера строки, первая строка всегда будет единственной, выбранной и стилизованной.
Следует также отметить, что хотя эти два селектора используют синтаксис с двумя двоеточиями (чтобы отличать псевдоэлементы от псевдоклассов), некоторые старые браузеры поддерживают их, используя синтаксис с одиночной двоеточием.
Примечание. Chrome не распознает text-transform: uppercase::first-line Это известная ошибка.
: not () псевдокласс
Этот псевдокласс называется псевдоклассом отрицания . Этот селектор говорит браузеру стилизовать все элементы, кроме тех, которые указаны в скобках. Отрицательные элементы указываются с использованием селектора типа элемента, селектора класса, селектора идентификатора, селектора атрибута или псевдокласса.
Например:
button:not([disabled]) {
color: #white;
}
:not(div) {
background: #ccc;
}
В первом блоке объявления мы нацеливаемся на все элементы кнопки, которые не имеют атрибута «отключен» в HTML. Во втором блоке объявления мы нацелены на все элементы, которые не являются элементами <div>
Поддержка браузера?
Как уже упоминалось, за исключением :indeterminate Они поддерживаются везде, включая IE9 и выше. Так что единственной проблемой браузеров являются старые версии Internet Explorer. И если вы не возражаете предоставить старым IE дополнительный сценарий, вы можете попробовать Selectivizr, чтобы исправить отсутствие поддержки.
Вывод
Надеюсь, вам понравился этот обзор селекторов текущего поколения. Если вы часто их используете или знаете какие-либо странные особенности браузера, стоит добавить комментарий.