Селекторы

Псевдокласс :not[2/20]

Псевдокласс:not(селектор)является отрицающим селектором. С его помощью можно выбрать элементы, которыеНЕсодержат указанный селектор:

li:not(:last-child) { }

Этот селектор выберет все теги<li>,НЕявляющиеся последними в их родителе.

Псевдокласс:notпохож на оператор!в программировании:

if (!selector) { ... }

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

Также в комбинации с:notне применяются:

  • объединение селекторов: например,li:not(.heart.jack)– некорректный селектор;
  • псевдоэлементы:li:not(::after)– неправильная запись (подробнее о псевдоэлементах рассказано далее в курсе);
  • селекторы-потомки, групповые селекторы или комбинации: например, нельзя писатьli:not(a span)илиli:not(a + span)

Комбинируем :not[3/20]

Отрицающий селектор:not, как и любые другие селекторы, можно комбинировать с другими. Например:

li:not(:first-child):not(:last-child) { }

Выберет все теги<li>, которыеНЕявляются первыми и последними в их родителе.

Объединять можно неограниченное количество селекторов.

Псевдокласс :nth-last-child[4/20]

В первом курсе про селекторы мы уже рассматривали псевдокласс:nth-child, сейчас посмотрим на:nth-last-child.

Псевдокласс:nth-last-childиспользуется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса:nth-child, отсчет ведется не от первого элемента, а от последнего. Вот и все различия.

Подробнее об :nth-child и синтаксисе выражений рассказано в пошаговой демонстрации

Использование псевдокласса :nth-child

Псевдокласс :first-of-type[5/20]

Псевдокласс:first-of-typeочень похож на:first-child. Он выбирает первый дочерний элемент родителя, только с учетом типа элементов.

Например, в этом задании перед списками с картами есть блок с текстом. У списков и у блока с текстом общий родитель —body.

<body>
 <div class="paper">
  … 
 </div>
 <ul class="cards">
  … 
 </ul>
 <ul class="cards">
  … 
 </ul>
</body>

Сравним две записи:

ul:first-child {
   background: #ffffee;
}

ul:first-of-type {
   background: #ffffee;
}

Верхний селектор выбирает первый дочерний элемент в родителе, причем этот элемент должен бытьul. В нашем случае не выберется ничего, потому что первым дочерним элементомbodyявляетсяdiv.

Нижний селектор выбирает первыйulсреди всех дочернихulв своем родителе. В нашем случае будет выбрана первая строка с картами.

Псевдокласс :last-of-type[6/20]

В предыдущем задании мы рассмотрели псевдокласс:first-of-type.

Псевдокласс:last-of-typeработает аналогично, только выбираетпоследнийдочерний элемент родителя с учетом типа.

Пример записи:

ul:last-of-type {
    ...
}

Псевдокласс :nth-of-type[7/20]

Псевдокласс:nth-of-typeработает почти так же, как и:nth-child. Разница заключается в том, что он учитывает тип элемента.

Вы можете обратиться к разбору примерав пятом задании, чтобы разобраться в отличиях этих селекторов.

Еще пример. Если в текущем задании мы используем такие селекторы:

ul:nth-child(2) { }
ul:nth-of-type(2) { }

То верхний cелектор выберет второй по счёту дочерний элемент и этот элемент должен бытьul. В нашем случае выберетсяперваястрока карт.

А нижний селектор выберет второй по счетуulсреди дочернихul. В нашем случае выберетсявтораястрока карт.

Информация о синтаксисе:nth-childописана в задании Псевдокласс :nth-child курса «Селекторы, часть 1».

Вот неплохая дополнительная статья о различиях:nth-childи:nth-of-typeи её перевод на Хабре.

Псевдокласс :nth-last-of-type[8/20]

Наверняка, вы и сами уже прекрасно догадались, как будет работать:nth-last-of-type.

Элементы выбираются по их расположению, отсчет ведется от конца, учитывается тип элемента.

Пример записи:

ul:nth-last-of-type(2) { }

Когда набор элементов не очень большой, все эти псевдоклассы:nth-child,:nth-of-type,:nth-last-child,:nth-last-of-typeможно легко заменить один другим.

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

Cелектор последующих элементов[10/20]

Ранее мы уже рассматривалисоседние селекторы, которые записываются какселектор1 + селектор2.

Есть похожий селекторселектор1 ~ селектор2. Стили применятся к элементу, подходящему подселектор2, только если перед ним расположен элемент, подходящий подселектор1.

Отличие от соседнего селектора состоит в том, что между элементамиселектор1иселектор2могут находиться другие элементы. Поэтому будем называтьселектор1 ~ селектор2селектором следующих элементов.

Сравним:

<ul class="cards">
    <li class="king diamond">
    <li class="queen heart">
    <li class="jack spade">
    <li class="ace heart">
    <li class="king club">
</ul>

.queen.heart + li {
   background-color: #ffff99;
}

.king.diamond ~ li {
   background-color: #99ddff;
}

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

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

Псевдокласс :empty[11/20]

Псевдокласс:empty, выбирает только те теги, у которых нет дочерних элементов (в том числе текстовых узлов). Учтите, что даже переход на новую строку считается текстовым узлом, помните об этом в процессе проектирования структуры страницы.

Пример:

ul:empty {
    ...
}

В данном случае выберутся все пустые элементыul.

Псевдокласс :only-child[12/20]

Псевдокласс:only-childпригодится, когда нужно прописать индивидуальные стили для элемента, который является единственным дочерним элементом внутри родительского контейнера.

Пример:

li:only-child {
    ...
}

Сработает, когда этот<li>в списке единственный.

Cелектор:only-childэквивалентен селекторуelem:last-child:first-child.

Псевдокласс :only-of-type[13/20]

Псевдокласс:only-of-typeработает почти так же, как и:only-child. Отличие состоит в том, что он учитывает тип элемента.

Пример:

p:only-of-type {
    ...
}

В данном случае стили будут применены к элементуp, если это единственныйpвнутри своего родителя.

Псевдоэлемент ::before[14/20]

Псевдоэлементbeforeпозволяет с помощью CSS добавитьпсевдотегвнутрь другого элемента и оформить его. Cодержимое псевдотега задаётся с помощью свойстваcontent.

Например, у нас есть такой HTML:

<div class="queen heart">
    <em>Дама</em>
</div>

Добавим CSS-правило с необычным селектором с двойным двоеточием:

.heart::before { content: "Черви"; }

И HTML изменится вот так:

<div class="queen heart">
    <before>Черви</before>
    <em>Дама</em>
</div>

Но! Исходный HTML-код не изменится, тег<before>не попадёт в код страницы, а будет «виртуально» существовать где-то в браузере. Поэтому мы и используем приставкупсевдо.

Ведёт себя псевдотег так же, как обычный<span>с текстом. Ему можно задавать дополнительные стили, например:

.heart::before {
     content: "Черви";
     color: red;
}

Чтобы псевдоэлемент появился, ему необходимо задать свойствоcontent. Достаточно даже пустой строки в значении свойства —content: "";.

Псевдоэлемент ::after[15/20]

Псевдоэлементafterаналогиченbefore. Отличие заключается в том, что он добавляет псевдотег не в начало, а в конец элемента. Например:

.heart::after { content: "Черви"; }

Даст такой результат:

<div class="queen heart">
    <em>Дама</em>
    <after>Черви</after>
</div>

Псевдоэлементыbeforeиafterможно использовать одновременно. Это означает, что с помощью CSS вы можете добавить к любому элементу на странице два псевдоэлемента.

Обратите внимание, что псевдоэлементы пишутся с двойным двоеточием. Этим они отличаются от псевдоклассов, которые используют одинарное двоеточие.

В старом варианте стандарта псевдоэлементы можно было использовать с:. Поэтому запись с:понимают и очень старые браузеры. Но сейчас использовать одинарное двоеточие для псевдоэлементов считается дурным тоном.

Позиционирование псевдоэлементов[16/20]

Вы можете задавать псевдоэлементам любые CSS-свойства. Можно менять тип элемента, задавать ему позиционирование, отступы, фон и так далее.

Этими возможностями особенно часто пользуются при создании различных декоративных эффектов. Это очень удобно.

Во-первых, не нужно добавлять лишний тег под каждую очередную мелкую иконку.

Во-вторых, можно управлять этими иконками/декоративными элементами только с помощью CSS, что открывает огромный простор для создания интересных динамических эффектов.

Псевдоэлементы ::first-line и ::first-letter[18/20]

Отвлечемся от карт и обратимся к тексту.

Псевдоэлементfirst-lineзадает стиль первой строки форматированного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д. В правилах стиля допустимо использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона.

Пример использования:

p::first-line { }

Аналогично псевдоэлементfirst-letterопределяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.

Пример использования:

p::first-letter { }

Селекторы, часть 3

Рассмотрим продвинутые селекторы, умеющие искать элементы по подстрокам в атрибутах, а также огромное количество селекторов для стилизации элементов форм, таких как:required,:optionalи:checked.

Ищем в начале строки: [foo^="bar"][1/18]

Впервом курсе про селекторымы разбирали селектор по атрибутам, когда записьinput[type="text"]выберет все элементыinput, у которых атрибутtypeравенtext.

У этого механизма есть дополнительные возможности: можно выбирать элементы по вхождению подстроки в значение атрибута.

Запись вида[foo^="bar"]выберет все элементы, у которых значение атрибутаfooначинается с подстрокиbar.

Представьте, что у вас есть три класса для задания колонок разной ширины, например:column-1,column-2иcolumn-3.

У этих классов часть свойств повторяется, а разной является только ширина. Чтобы не дублировать CSS-код, вы можете вынести общие свойства колонок в правило с селектором[class^="column-"], а в остальных правилах задать только ширину:

[class^="column-"] {
    /* общие свойства: отступы, рамки, фон и т.д. */
}
.column-1 { width: 100px; }
.column-2 { width: 200px; }
.column-3 { width: 300px; }

То есть, первый селектор выберет все дивы с классами, начинающимися наcolumn-:

<div class="column-1"></div>
<div class="column-2"></div>
<div class="column-3"></div>

Обратите внимание, что селектор чувствителен к регистру.

Селекторы этого курса относятся к спецификации CSS3 и работают во всех распространённых современных браузерах.

Ищем в конце строки: [foo$="bar"][2/18]

Селектор вида[foo$="bar"]выбирает все элементы, значение атрибутаfooкоторых оканчивается строкойbar.

Представьте, что у вас на сайте есть раздел с файлами для скачивания в разных форматах и вам нужно для каждого типа файлов добавить свою иконку. Пример разметки:

<a href="batman.pdf">Скачать</a>
<a href="superman.doc">Скачать</a>

В этом случае вы можете назначать иконки в CSS по расширениям файлов:

a[href$=".pdf"] {
    /* иконка для PDF */
}
a[href$=".doc"] {
    /* иконка для DOC */
}

И снова, селектор чувствителен к регистру.

Поиск подстроки везде: [foo*="bar"][3/18]

Следующий вариант записи[foo*="bar"]

Будут выбраны все элементы, у которых значение атрибутаfooсодержит подстрокуbarна любой позиции

Среди трёх элементов:

<p class="person-name"></p>
<div class="some-person-info"></div>
<span class="date-person"></span>

селектор[class*="person"]выберет все.

Обратите внимание, что селектор чувствителен к регистру.

Поиск слов внутри строки: [foo~="bar"][4/18]

Следующая запись:[foo~="bar"].

Такой селектор выберет все элементы, у которых значение атрибутаfooсодержит словоbar.

Входить должно именно слово, а не просто подстрока. То есть вхождениеbarдолжно содержать с обеих сторон разделители: пробелы или начало/конец строки.

Поиск префиксов: [foo|="bar"][5/18]

Селектор по атрибутам вида[foo|="bar"]

В данном случае будут выбраны все элементы, у которых значение атрибутаfooсодержит префиксbar, то есть либо полностью совпадает сbar, либо начинается со строкиbar-(наличие знака переноса существенно). Другими словами, используя уже знакомые записи селекторов, этот можно заменить на два:
1.[foo="bar"]— все элементы, у которых значение атрибутаfooполностью совпадает со значениемbar.
2.[foo^="bar-"]— все элементы, у которых значение атрибутаfooначинается со значенияbar-.

Псевдоклассы :enabled и :disabled[9/18]

В предыдущих курсах мы уже научились работать с формами и разными полями форм. Теперь рассмотрим ряд дополнительных селекторов для работы с этими элементами.

Для обращения к элементам, которые являются доступными на сайте (не заблокированными), можно использовать псевдокласс:enabled. Заблокированными считаются элементы форм, у которых установлен атрибутdisabled. Подробнее об этом атрибуте можно посмотреть в этом курсе

Например:

input:enabled {
   /* какие-то стили */
}

И наоборот, если нужно обратиться только к заблокированным элементам, то для этого есть псевдокласс:disabled

Псевдоклассы :read-only и :read-write[10/18]

Как мы уже рассматривали в предыдущих курсах, есть разные способы запретить редактирование пользователем полей. Одним из таковых является установка атрибутаreadonly. Значение в данном случае доступно для чтения и копирования, но недоступно для редактирования.

В зависимости от этого параметра существует два селектора, которые позволяют выбирать каждую группу полей

Селектор:read-writeвыберет все поля доступные для редактирования

Селектор:read-onlyвыберет все поля доступные только для чтения

Пример записи:

input:read-only {}

В случае, если браузер не поддерживает такие селекторы, их можно заменить на аналогичные:

input[readonly] {} /* аналог :read-only */
input:not([readonly]) {} /* аналог :read-write */

Однако, обратите внимание, чтоinput:not([readonly])помимо доступных для редактирования текстовых полей выберет кнопки и другие нетекстовые поляinput, например,input[type="submit"].

Псевдокласс :required[11/18]

Мы уже разбирали, что при помощи специального атрибутаrequiredможно отметить поля, обязательные для заполнения

Используя селектор:requiredможно задать отдельные стили для этих полей

Например

input:required {}

Псевдокласс :optional[12/18]

Помимо:requiredсуществует селектор:optional, выполняющий обратное действие. То есть выберутся все элементы, у которых НЕ указан атрибутrequired

Пример записи

select:optional {}

Псевдокласс :checked[13/18]

При помощи селектора:checkedможно обратиться ко всем элементамinputс типамиcheckboxилиradio, которые являются выбранными (отмеченными)

Например

input:checked {}

Псевдоклассы :invalid и :valid[14/18]

При помощи разных типов полей (email, url и др.) или специфических настроек (pattern, min/max и др.) можно указать браузеру, какие именно данные мы ожидаем от пользователя в том или ином поле.

Селектор:validвыберет все элементы, у которых введенное значение удовлетворяет требованиям.

А селектор:invalidсоответственно выберет элементы, у которых введенное значение некорректно.

Пример записи:

input:invalid { }

Псевдоклассы :in-range и :out-of-range[15/18]

В курсе, посвященномФормам и HTML5мы разбирали специальный тип поля для ввода числовых значений<input type="number">. У этого поля можно определить максимальное и минимальное значение при помощи атрибутовmaxиminсоответственно.

Селектор:in-rangeвыбирает все элементы, значение которых попадает в указанный диапазон.

А селектор:out-of-rangeвыбирает все элементы, значение которых НЕ попадает в указанный диапазон.

Например:

input:in-range {}

Объединяй и властвуй[16/18]

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

Например

input[type="checkbox"]:required:checked {}

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

Чудеса с ~ и :checked[17/18]

Благодаря селектору:checked, с помощью чистого CSS можно создавать очень много интересных эффектов, так как мы можем не просто выбирать отмеченные поля форм, но и влиять с помощью этих полей на другие элементы.

Для этого нам нужно комбинировать:checkedи~, который позволяет выбрать все элементы, идущие за отмеченным полем. Пример:

input:checked ~ .item {
    color: red;
}

Такое CSS-правило задаст красный цвет, всем элементам с классомitem, расположенным после отмеченного поля.

Получается, что мы можем с помощью чекбоксов или радиобаттонов управлять внешним видом других элементов. С помощью этого приёма, например, делают переключающиеся вкладки, которые работают без JavaScript.

Давайте разберём пример попроще. Добавим переключатели, которые будут показывать опредёленных котов.

results matching ""

    No results matching ""