Псевдоэлементы
Содержание:
- :disabled
- Все псевдо-классы CSS
- Древовидная структура HTML документа
- и являются просто элементами одного уровня, а не сестринскими элементами
- Псевдоклассы и псевдоэлементы
- Псевдоклассы и псевдоэлементы
- Комбинаторы
- Выравнивание текста столбцов (:nth-child)
- Родственные селекторы
- ::before и ::after пустых и замещаемых элементов
- :dir (эксперимент)
- ::backdrop (эксперимент)
- :default
- :first-letter
- Какими бывают состояния ссылок
- Селекторы отношений
- Одно или два двоеточия ставить перед псевдоэлементами?
- Когда использовать и не использовать генерируемый контент в CSS
:disabled
:disabled работает с элементами форм в их отключенном состоянии. “Задизейбленный” (отключенный) элемент не может быть выбран, с ним нельзя взаимодействовать или активировать его, он не может получить фокус.
Пример: поле ввода имени отключено, поэтому оно отображается прозрачным на 50%.
HTML:
<input type="text" id="name" disabled>
CSS:
:disabled { opacity: 0.5;}
Совет: Использовать disabled=”disabled” в разметке не требуется. Вы получите тот же результат используя только логический атрибут dasabled. Однако стоит помнить, что использование disabled=”disabled” обязательно в XHTML.
Demo:
Все псевдо-классы CSS
| Селектор | Примере | Пример описания |
|---|---|---|
| :active | a:active | Выбор активной ссылки |
| :checked | input:checked | Выбор каждого отмеченного <input> элемента |
| :disabled | input:disabled | Выбор всех отключенных элементов <input> |
| :empty | p:empty | Выбор каждого элемента <p>, не имеющего дочерних элементов |
| :enabled | input:enabled | Выбор всех включенных элементов <input> |
| :first-child | p:first-child | Выбирает каждый элемент <p>, являющийся первым дочерним элементом родительского элемента |
| :first-of-type | p:first-of-type | Выбор каждого элемента <p>, являющегося первым элементом <p> родительского элемента |
| :focus | input:focus | Выбор элемента <input>, имеющего фокус |
| :hover | a:hover | Выбор ссылок при наведении указателя мыши |
| :in-range | input:in-range | Выбор <input> элементов со значением в указанном диапазоне |
| :invalid | input:invalid | Выбор всех элементов <input> с недопустимым значением |
| :lang(language) | p:lang(it) | Выбирает каждый элемент <p> со значением атрибута lang, начинающимся с «IT» |
| :last-child | p:last-child | Выбирает каждый элемент <p>, являющийся последним дочерним элементом родительского элемента |
| :last-of-type | p:last-of-type | Выбирает каждый элемент <p>, являющийся последним <p> элементом его родительского элемента |
| :link | a:link | Выбор всех непосещаемых ссылок |
| :not(selector) | :not(p) | Выбор каждого элемента, не являющегося элементом <p> |
| :nth-child(n) | p:nth-child(2) | Выбирает каждый элемент <p>, являющийся вторым дочерним элементом родительского элемента |
| :nth-last-child(n) | p:nth-last-child(2) | Выбирает каждый элемент <p>, являющийся вторым дочерним элементом родительского объекта, считая от последнего дочернего элемента |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Выбирает каждый элемент <p>, являющийся вторым элементом <p> родительского элемента, считая от последнего дочернего элемента |
| :nth-of-type(n) | p:nth-of-type(2) | Выбор каждого элемента <p>, являющегося вторым элементом <p> родительского элемента |
| :only-of-type | p:only-of-type | Выбор каждого элемента <p>, являющегося единственным элементом <p> родительского элемента |
| :only-child | p:only-child | Выбирает каждый элемент <p>, являющийся единственным дочерним элементом родительского элемента |
| :optional | input:optional | Выбор <input> элементов без атрибута «обязательный» |
| :out-of-range | input:out-of-range | Выбор < input > элементов со значением за пределами заданного диапазона |
| :read-only | input:read-only | Выбор <input> элементов с указанным атрибутом «ReadOnly» |
| :read-write | input:read-write | Выбор <input> элементов без атрибута «ReadOnly» |
| :required | input:required | Выбор <input> элементов с указанным атрибутом «required» |
| :root | root | Выбор корневого элемента документа |
| :target | #news:target | Выбор текущего активного элемента #news (щелчок по URL-адресу, содержащему это имя привязки) |
| :valid | input:valid | Выбор всех элементов <input> с допустимым значением |
| :visited | a:visited | Выбор всех посещенных ссылок |
Древовидная структура HTML документа
Рассмотрим следующее изображение:
Рис. 8 Пример древовидной структуры HTML.
Любой HTML код имеет древовидную структуру, в которой первый используемый тег — <html> выступает предком (прародителем) всех остальных элементов, из него выходят такие элементы как <head> и <body>:
Рис. 8а Предок в HTML документе.
HTML элемент, расположенный внутри другого элемента является его потомком. Элемент <title> потомок <head>, а элемент <h2> и <p> на изображении потомки <body>.
Рис. 8б Потомки в HTML документе.
Обратите внимание на важный момент, что элемент является потомком одновременно для элемента
,
и для . Рис
8в Потомок для нескольких элементов
Рис. 8в Потомок для нескольких элементов.
Родительский элемент связан с другими элементами более низкого уровня и находится на один уровень выше их. Например, <html> элемент является родительский элементом для <head> и <body>, а элемент <p> является родительским для элемента <i>.
Рис. 8г Родительские элементы в HTML документе.
Элемент, подчиненный другому элементу более высокого уровня, является дочерним. На изображении ниже оба элемента <h2> и <p> являются дочерними по отношению к <body>, но элемент <i> при этом не является дочерним для элемента <body>, так как он расположен внутри тега <p>, и является дочерним именно для него.
Рис. 8д Дочерние элементы в HTML документе.
Дочерние элементы для одного и того же родительского элемента, называются элементами одного уровня (соседними элементами, или сестринскими элементами). Например, такие элементы как <head> и <body>, или <h2> и <p>.
Еще раз акцентирую ваше внимание на том, что сестринские элементы расположены на одном уровне в пределах одного родителя. К примеру, элементы
и являются просто элементами одного уровня, а не сестринскими элементами
Рис. 8е Сестринские элементы в HTML документе.
И так, с родственными связями мы пока остановимся, у нас же тут не ток шоу с Андреем Малаховым, верно? Вернемся к селекторам потомков, которые, используя древовидную структуру HTML документа, позволяют форматировать вложенные элементы по нашему усмотрению.
Псевдоклассы и псевдоэлементы
И псевдоклассы, и псевдоэлементы были с самого начала CSS, с CSS1 (в этом году !). И там же было такое пояснение различия между ними:
Потом пришел CSS2, а за ним и CSS2.1. В июне 2011-го он с горем пополам стал стандартом, а в сентябре того же 2011-го стандартом стал модуль селекторов 3 уровня (и формально по сей день стандарт). Именно в нем у псевдоэлементов появилось двойное двоеточие. За это время приходили и уходили другие спецификации, от «вечного кандидата в рекомендации» до совсем чернового предложения от Adobe, и все они норовили прибавить что-то своё. А еще HTML5 со своими интерактивными новинками…
Но то отличие в главном по-прежнему актуально.
Любой псевдокласс соответствует какому-то элементу. Или в каком-то определенном состоянии, после каких-то действий пользователя (под фокусом, при наведении), или в каком-то определенном месте DOM-дерева (пятый в ряду, третий с конца…), или отвечает каким-то дополнительным условиям (напр. не является заголовком) — если некий элемент вдруг оказался в этом состоянии/в этом месте/с такими параметрами, к нему применится соответствующий псевдокласс. Само название указывает, что они — некое подобие классов. Как и классы, псевдоклассы можно комбинировать в каких угодно сочетаниях. У одного элемента их может быть сколько угодно (например, , причем в любом порядке.
Действующий стандарт выделяет , по не всегда понятной логике (чем :target не динамический?). В идущем ему на смену черновике CSS Selectors 4 классификацию чуть обновили:
- языковые (, )
- псевдоклассы места (все ссылочные и )
- действия пользователя (, , …)
- временные (в теории, помогут подсветить элементы по мере озвучки их скринридером, показать субтитры для видео в нужный для них момент и т.п.)
- состояния ввода (, …)
- структурные (, , …)
- новые псевдоклассы для выбора элементов по колонке таблицы или грида.
- функциональные псевдоклассы для комбинации других селекторов (, и — только б не спугнуть! — долгожданный ).
А вот псевдоэлементы — судя по названию же, лишь отдаленное подобие элементов. Они выбирают что угодно: букву, фрагмент текста с другими элементами внутри, кнопку в составном поле ввода или вообще что-то, чего и близко не было в исходном документе — только не реальный DOM-элемент. Но это непонятное что-то получит визуальное представление и займет достойное место в , а затем и на экране, наравне с настоящими элементами.
У элемента, которого нет, по идее, не может быть и соседей, тем более потомков. Поэтому в действующем стандарте (в вольном переводе):
Именно поэтому мы привыкли видеть псевдоэлементы в селекторах последними. Правда, в том же стандарте прячется осторожная оговорка, что это, возможно, не навсегда… но не будем забегать вперед.
Какие есть псевдоэлементы? Само собой, и . Чуть менее известны (хотя еще старше и работали даже в IE5!) и . Эти 4 псевдоэлемента были в CSS2 (что дает им почетное право писаться с одним двоеточием). Удивительно, но в действующем стандарте и описаны! Лишь еще вскользь упомянут. Всё пёстрое богатство разнобраузерной «псевдофауны», что мы знаем по подборкам наподобие этой, стандарт словно игнорирует.
Относительно недавно обновился черновик нового отдельного модуля псевдоэлементов 4 уровня, в котором их чуть больше и вдобавок они логически сгруппированы:
- текстовые эффекты ()
- генерируемый контент (, , ::placeholder и ::marker)
- средства для выделения и подсветки — и его друзья.
Но здесь самое время остановиться и перейти от истории и теории к практике главной темы этой статьи — отношений псевдоэлементов с псевдоклассами и друг с другом:). Начнем с самого простого!
Псевдоклассы и псевдоэлементы
Обычно стили CSS применяются к тем элементам веб-страницы, которые видны в ее исходном коде. Но существуют случаи, когда необходимо создать стиль для определенного состояния элемента (например, внешний вид посещенной ссылки либо вид ссылки при наведенном на нее курсоре), а также для элемента, который четко не обозначен в структуре страницы. Примером такого элемента может быть первый символ в абзаце или первая строка.
С помощью псевдоклассов в CSS можно устанавливать стиль для уже существующих элементов веб-страницы, который будет применяться в случае каких-то действий пользователя. Псевдоэлементы же отличаются тем, что могут определять стиль несуществующего содержимого, а также четко не обозначенных элементов.
Популярные псевдоклассы CSS
Вы можете придавать элементам стиль, который будет зависеть от состояния этих элементов. Вот список некоторых псевдоклассов:
- – этот псевдокласс задает стиль ссылкам, по которым пользователь еще не перешел;
- – этот же, наоборот, применяет стиль к уже посещенным ссылкам;
- – определяет стиль элемента, когда на него наведен курсор (может применяться не только к ссылкам);
- – задает стиль активной ссылке (то есть, в момент клика по ней);
- – применяет стиль к элементу при фокусировке на нем (например, при установке курсора в строку поиска);
- – этот полезный псевдокласс позволяет выбрать и стилизовать только те элементы, которые не содержат селектор, указанный в скобках.
Как записываются псевдоклассы CSS? Необходимо добавить стиль с названием необходимого элемента + имя псевдокласса. Пример:
a:link {
color: red;
}
a:hover {
color: #26A65B;
}
a:visited {
color: #CCC;
}
В записанном стиле сказано, что обычные, непосещённые ссылки должны быть красного цветаa:link {color: red;}, ссылка при наведении должна менять цвет на другойa:hover {color: #26A65B;}, а посещённая ссылка должна иметь третий цветa: visited {color: #CCC;}.
Популярные псевдоэлементы CSS
Если псевдоклассы записываются с одним двоеточием, то псевдоэлементы – с двумя. Это было внедрено в CSS3 для того, чтобы различать псевдоклассы и псевдоэлементы между собой. Однако раньше этой разницы не существовало и с псевдоэлементами использовалось одно двоеточие. Сейчас браузеры поддерживают оба варианта написания (но не для всех случаев). Рассмотрим некоторые псевдоэлементы:
- – используется вместе со свойством и позволяет вывести необходимые данные после содержимого элемента;
- – выполняет похожую функцию, что и предыдущий, только выводит данные перед содержимым элемента;
- – этот псевдоэлемент распознается браузерами только при использовании двух двоеточий и позволяет установить цвет и фон для текста, который выделен пользователем;
- – используется для изменения стиля первого символа в тексте элемента;
- – используется для изменения стиля первой строки текста элемента.
Пример использования псевдоэлементов:
blockquote::before {
content: "«";
}
blockquote::after {
content: "»";
}
blockquote::selection {
color: #C8F7C5;
background-color: #1E824C;
}
Мы написали стиль для длинных цитат, который добавляет кавычки «ёлочки» в начале и в конце содержимого тега , а также изменяет цвет и фон выделенного пользователем текста цитаты.
Выводы
В этой главе вы узнали о таких важных и часто используемых в CSS вещах, как селекторы потомков, псевдоклассы и псевдоэлементы. В дальнейшем мы будем часто к ним возвращаться, поэтому запомните основные моменты по пройденной теме:
Благодаря селекторам потомков вам доступны гибкие и компактные настройки CSS-стилей.
Псевдоклассы позволяют создавать стиль для различных состояний элемента веб-страницы.
С помощью псевдоэлементов в CSS можно задать стиль для тех элементов страницы, которые четко не обозначены в структуре документа.
Следующая часть главы – о дочерних селекторах.
Комбинаторы
Комбинаторы — это знаки, которые разделяют простые селекторы внутри составного селектора. Напомню, что
в составном селекторе первый селектор указывает родительский элемент, а второй селектор указывает дочерний
элемент. При использовании комбинатора смысл составного селектора может изменяться.
Комбинаторы перечислены в следующей таблице:
| Комбинатор | Правило |
| > | Стиль будет применёт ко второму селектору, если он непосредственно вложен в первый селектор |
| + | Стиль будет применён ко второму селектору, если он следует сразу после первого селектора |
| ~ | Стиль будет применёт ко второму селектору, если он находится перед первым селектором |
По сути, пробел тоже является комбинатором, который устанавливает обычные правила работы составного
селектора
Для примера решим задачу, которая иногда решается на практике. Есть блок, внутри него есть тэги
<span>. Для тех тэгов <span>, которые
непосредственно вложены в блок, нужно установить определённый
стиль. А те тэги
<span>, которые находятся внутри других вложенных тэгов, должны остаться
неизменными. Задача лекго решается с помощю комбинатора >.
Стиль:
| 32333435 |
#st>span
{
color: Green;
}
|
HTML код:
| 454647 |
<div id="st">Начало <span>Зелёный текст</span> Продолжение <p><span>Текст без стиля</span></p> </div> |
Добавьте на страницу какие-нибудь элементы и попробуйте применить к ним стиль с импользованием других
комбинаторов.
Выравнивание текста столбцов (:nth-child)
По умолчанию текст во всех столбцах таблицы выравнивается по левому краю. Мы выровняем по правому краю все столбцы, кроме первого — чтобы цена и количество единиц товара лучше читались. Для этого мы воспользуемся селектором nth-child, но сначала необходимо узнать, как он работает.
Селектор nth-child ищет дочерние элементы заданного элемента; по аналогии с nth-of-type, он может использовать ключевые слова или формулу. Формула определяется в виде an+b, где а — множитель, a b — смещение. Принцип использования формул проще понять на примере. Давайте применим его к контексту таблицы. Для выбора всех строк таблицы можно воспользоваться селектором вида:
В этом примере не указан ни множитель, ни смещение. Все строки таблицы, кроме первой (строка с заголовками столбцов), выбираются при помощи селектора со смещением:
А для выбора каждой второй строки таблицы используется множитель 2n:
Каждая третья строка выбирается при помощи множителя 3n. Если прибавить к множителю смещение, то поиск будет начинаться не от начала таблицы, а с одной из следующих строк. Следующий селектор находит каждую вторую строку, начиная с четвертой:
Итак, для выравнивания всех столбцов, кроме первого, используется следующая запись:
Родственные селекторы
Родственные селекторы (другие названия: сестринские, сиблинговые) позволяют выбирать элементы HTML-страницы, являющиеся родственными по отношению друг к другу (то есть имеющие общего родителя и находящиеся на одном уровне). Сестринские селекторы похожи на соседние, но отличаются тем, что стиль применяется ко всем элементам выбранного типа, а не только к первому из них. Вместо знака используется символ тильда .
Пример: немного изменим предыдущую задачу и представим, что вам нужно сделать наклонный шрифт для всех абзацев , которые идут после заголовка . Код CSS будет выглядеть так:
h1 ~ p {
font-style: italic;
}
…и немного HTML для примера:
<div> <p>Текст</p> <h1>Заголовок 1</h1> <p>Текст</p> <p>Текст</p> <h2>Заголовок 2</h2> <p>Текст</p> </div> <div> <p>Текст</p> </div>
Взгляните на HTML-код: стиль применится ко всем тегам , которые следуют после тега и находятся до закрывающего тега родителя . В нашем варианте насчитывается 3 элемента , к которым применится стиль
Обратите внимание, что тег этому никак не помешает. Заметьте также, что в данном случае стиль не будет применен к тому тегу , который находится над , а также к тегу , имеющему другого родителя
Выводы
Используя соседние (смежные) селекторы, вы можете применять стиль к элементу в случае, когда он следует сразу за другим элементом (или группой элементов). Это работает с элементами, которые находятся на одном уровне и имеют общего родителя.
С помощью родственных селекторов можно применять стиль ко всем элементам выбранного типа в случае, когда они следуют сразу за другим элементом (или группой элементов). Это работает с элементами, которые находятся на одном уровне и имеют общего родителя.
Перейдя к следующей подглаве, вы познакомитесь с селекторами атрибутов.
::before и ::after пустых и замещаемых элементов
Еще одна загадка CSS, над которой давно ломают головы даже знатоки. Казалось бы, раз ::before и ::after добавляются перед и после контента элемента, то для всех пустых элементов (у которых ) они работать не должны: нет контента — нет и мест для вставки. Но практика часто показывает иное. Может, верна , что псевдоэлементы не работают только для замещаемых элементов? Но почему тогда во многих браузерах работают псевдоэлементы для <img> — уж он-то однозначно замещаемый?
Кстати, что такое эти замещаемые элементы, которые даже визуально форматируются ? Удивительно, но однозначного определения в CSS до сих пор нет!
Изначально () их определяли как «элемент, заменяемый контентом, на который из него указывается». Затем () — как «элемент, для которого движок CSS-форматирования знает лишь внутренние размеры» (именно тогда к замещаемым элементам стали относить поля форм). Наконец, в — который до последнего времени был актуальным стандартом — как «элемент, чей контент не рассматривается моделью форматирования CSS» (рассматривает ли она контент тех же <button> и <textarea>, который, вроде бы, вполне слушается как минимум CSS для шрифта — спецификация не уточняла).
Так что, видимо, искать глубокую закономерность тут незачем. Всё определяется тем, как эти элементы реализованы в браузерах — т.е. «как исторически сложилось». А сложилось так, что большинство браузеров всё равно замещает такие элементы… вопрос лишь, чем именно:)
Возьмем для примера пару картинок из вышеупомянутой статьи и рассмотрим их в отладчике Хрома, включив галочку «Показывать теневую DOM браузера»:
Но (2003 г.) было еще одно определение замещаемого: «элемент или псевдоэлемент, у которого вычисленное значение используемой части свойства contentоказывается отдельным URI». А это свойство можно было задавать всем элементам. Т.е. силами самого CSS по сути можно было сделать любой элемент замещаемым или незамещаемым! И там же впервые явно утверждалось, что у замещаемых элементов нет ::before и ::after (в других спецификациях их поведение было лишь «не определено»).
Похоже, когда-то давно в некоторых браузерах (Opera Presto и WebKit) это даже частично поддерживалось. Потом браузеры стали от этого избавляться. Если в iOS 9.2 Safari указание свойства content для <img> еще влияло на отображение псевдоэлементов для картинки, то уже в iOS 9.3 — перестало. И вот недавно этот модуль спецификации обновился — с той же самой формулировкой! Правда, возможности самого свойства content урезали: если сделать незамещаемый элемент замещаемым (заменить картинкой) можно, то наоборот — уже нельзя. Так что возвращать убранное браузерам не придется.
И еще курьезный факт — собственные запреты не мешают самому W3C в собственных спецификациях стилизовать «отбивку» <hr> вот так:
See the Pen LZVvmy by Ilya Streltsyn (@SelenIT) on CodePen.
Это работает во всех актуальных браузерах.
:dir (эксперимент)
ПК :dir нацелен на элемент, направление которого указывается в документе. Другими словами для того чтобы ПК :dir работал в разметке у соответствующего html-элемента должен быть установлен атрибут dir.
В настоящий момент доступны два значения для направления: ltr (слева направо) и rtl (справа налево).
На момент написания статьи только Firefox (с вендорным префиксом -moz-dir()) поддерживает ПК :dir. Очень похоже, что скоро это изменится. Поэтому в примере показаны оба варианта — с префиксом и без.
Заметка: Объединение в одном правиле версии с префиксом и без работать не будет. Нужно создать два отдельных правила.
Пример: параграф написан на арабском языке (направление текста справа налево). Текст будет оранжевого цвета.
HTML:
<article dir="rtl"> <p>التدليك واحد من أقدم العلوم الصحية التي عرفها الانسان والذي يتم استخدامه لأغراض الشفاء منذ ولاده الطفل.</p></article>
CSS:
/* prefixed */article :-moz-dir(rtl) { color: orange;}/* unprefixed */article :dir(rtl) { color: orange;}
Параграф ниже написан на английском (слева направо). Текст будет синим.
HTML:
<article dir="ltr"> <p>If you already know some HTML and CSS and understand the principles of responsive web design, then this book is for you.</p></article>
CSS:
/* prefixed */article :-moz-dir(ltr) { color: blue;}/* unprefixed */article :dir(ltr) { color: blue;}
Demo:
::backdrop (эксперимент)
ПЭ ::backdrop — это блок, который создается за полноэкранным элементом, но находится над всем прочим содержимым. Используется в комбинации с псевдоклассом :fullscreen чтобы изменить цвет фона в полноэкранном режиме. По умолчанию будет фон черного цвета.
Заметка: ПЭ ::backdrop требует двойного двоеточия (::). С одинарным двоеточием (:) не работает.
Давайте продолжим эксперимент с нашим псевдоклассом :fullscreen.
HTML:
<h1 id="element">This heading will have a solid background color in full-screen mode.</h1><button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Trigger full screen!</button>
CSS:
h1:fullscreen::backdrop { background: orange;}
Demo:
:default
ПК :default нацелен на элемент по умолчанию в форме среди группы сходных элементов.
В случае, если вам нужно назначить кнопку по умолчанию в форме, но элемент не имеет класса, то вы можете воспользоваться псевдоклассом :default.
Обратите внимание, что кнопки “Reset” или “Clear” в формах сопровождаются серьезными проблемами с юзабилити. Используйте их только там, где без этого совершенно невозможно обойтись
В следующих статьях этот вопрос освещен более подробно:
- “Reset and Cancel Buttons,” Nielsen Norman Group (2000)
- “Killing the Cancel Button on Forms for Good,” UX Movement (2010)
Demo:
:first-letter
Определяет стиль первого символа в тексте элемента, к которому добавляется.
Это позволяет создавать в тексте буквицу и выступающий инициал.
Буквица представляет собой увеличенную первую букву, базовая линия которой
ниже на одну или несколько строк базовой линии основного текста.
Выступающий инициал — увеличенная прописная буква, базовая линия которой совпадает
с базовой линией основного текста.
Рассмотрим пример создания выступающего инициала. Для этого требуется добавить
к селектору P
псевдоэлемент :first-letter
и установить желаемый стиль инициала. В частности, увеличить размер текста и
поменять цвет текста (пример 16.3).
Пример 16.3. Использование:first-letter
HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx
Псевдоэлементы
Луч фонарика высветил старые скрипучие ступени, по которым не далее
как пять минут назад в дом поднялся Паша
Оля осторожно приоткрыла дверь
и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую
завесу из мрака и пыли
Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого
не было, и лишь на полу валялась порванная туфля Паши.
Результат примера показан ниже (рис. 16.3).
Рис. 16.3. Создание выступающего инициала
В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца
текста.
Какими бывают состояния ссылок
Когда вы пишете стиль CSS, то с помощью селектора указываете, для какого элемента он предназначен. В самом начале учебника, когда мы изучали селекторы, в одном из уроков рассматривались псевдоклассы CSS, благодаря которым можно задавать стили для разных состояний элемента, в том числе для ссылок. Ниже — четыре состояния, которые могут принимать ссылки:
- — ссылка, на которую наведен курсор;
- — активная ссылка (та, по которой совершается клик, или на которой удерживается кнопка мыши);
- — ссылка, еще не посещенная пользователем;
- — посещенная ссылка.
Для справки: из соображений безопасности набор стилей, которые можно использовать для ссылок , ограничен. Посещенные ссылки принимают только свойства , , (и его производные), , . При этом свойство к посещенной ссылке можно применить, только если это же свойство задано и для обычной. Прозрачность цвета, установленная через альфа-канал для элемента , будет проигнорирована. JavaScript-метод getComputedStyle всегда возвращает значение цвета непосещенных ссылок, даже если у посещенных ссылок цвет иной.
Стилизация состояний
С помощью псевдокласса можно существенно изменить стиль ссылки, которая находится в состоянии наведенного на нее курсора. Простейший пример:
a { color: red; } /* обычный цвет ссылки */
a:hover { color: blue; } /* цвет ссылки, на которую наведен курсор */
Псевдокласс также поддается гибкой стилизации:
a:active { background-color: yellow; } /* цвет фона ссылки в момент нажатия на нее */
Если в ваши планы входит максимально детальная проработка дизайна ссылок, то желательно определить стили для всех четырех состояний
При этом очень важно соблюсти порядок, в котором будут записаны селекторы с псевдоклассами. Обязательно размещайте их в следующей последовательности:
a:link { color: red; }
a:visited { color: grey; }
a:hover { color: blue; }
a:active { background-color: yellow; }
Что будет, если поменять строки местами? В этом случае некоторые стили перестанут работать согласно правилам каскадности. Дело в том, что ссылка может находиться одновременно в двух состояниях, к примеру, в и в , и если расположить стиль для выше, чем стиль для , то первый перекроется.
Выбор ссылок с помощью селекторов
Как записать селектор с псевдоклассом для определенной группы ссылок? Например, если вам нужно применить какой-то стиль для всех ссылок навигационного меню с идентификатором , когда такая ссылка находится в состоянии наведенного на нее курсора, вы можете использовать такой селектор:
#main-menu a:hover {background-color: #a38beb;}
Либо, если у каждой ссылки этого меню дополнительно имеется свой класс (допустим, это ), то такая запись тоже подойдет:
#main-menu a.menu-link:hover {background-color: #a38beb;}
#main-menu .menu-link:hover {background-color: #a38beb;} /* так тоже сработает */
Чтобы определить стили для всех состояний данных ссылок, запишите для каждого псевдокласса отдельное правило:
#main-menu .menu-link:link { color: red; }
#main-menu .menu-link:visited { color: grey; }
#main-menu .menu-link:hover { background-color: #a38beb; }
#main-menu .menu-link:active { background-color: yellow; }
Обширные возможности CSS в плане построения селекторов позволяют с удобством делать точную выборку ссылок, которые вам необходимо стилизовать. А какие именно свойства CSS применимы к ссылкам, мы обсудим в следующем уроке.
Селекторы отношений
В HTML документе каждый элемент всегда связан с другими элементами.
Виды отношений между HTML элементами:
- родитель – элемент, непосредственно в котором находится рассматриваемый элемент;
- предок – это элемент, который расположен на одном из уровней иерархии элементов, до которого можно дойти двигаясь от рассматриваемого элемента к его родителю, от его родителя к родителю его родителя и т.д.
- дети – это элементы, непосредственно расположенные в текущем рассматриваемом элементе;
- потомки (дочерние элементы) – это любые элементы, которые находятся в текущем элементе вне зависимости от уровня иерархии, в котором они расположены;
- соседи (сиблинги) – это элементы, расположенные на том же уровне вложенности (иерархии), что и рассматриваемый элемент; или другими словами — это все другие элементы, которые имеют того же родителя что и текущий рассматриваемый элемент.
Более наглядно про отношения элементов приведено на рисунке. На этом рисунке отношения рассмотрены относительно элемента выделенного синим цветом.
В CSS имеется 4 вида селекторов отношений.
Первые два из них и относятся к вложенным селекторам. Они предназначены для поиска элементов в зависимости от их нахождения внутри других.
Остальные два и являются CSS селекторами для выбора соседних элементов.
Эти селекторы называют составными или комбинацией селекторов. Так как они на самом деле состоят из нескольких селекторов, разделённых между собой с помощью специальных символов (комбинаторов). Всего различают 4 символа: пробел, знак (больше), знак и (тильда).
Селектор X Y (для выбора вложенных или дочерних элементов)
Селектор (предок потомки) предназначен для выбора элементов , находящихся в .
Другими словами, селектор предназначен для выбора элементов , являющихся потомками элементов определяемым селектором .
Селекторы называют контекстными или вложенными.
Например, селектор дочерних элементов выберет все элементы , расположенные в .
Селектор X > Y
Селектор (родитель > дети) предназначен для выбора элементов, определяемым селектором непосредственно расположенных в элементе, определяемым селектором .
По другому можно сказать, что селектор предназначен для выбора , у которых родителем является элемент, определяемым .
Например, комбинация селекторов выберет все элементы , которые непосредственно расположены в .
Селектор X + Y
Селектор предназначен для выбора элементов , каждый из которых расположен сразу же после . Элементы определяемым селектором и должны находиться на одном уровне вложенности, т.е. быть по отношению друг к другу соседями (сиблингами).
Например, комбинация селекторов выберет все элементы , которые расположены сразу же за элементом , и являющиеся друг по отношению к другу соседями (сиблингами).
Селектор X ~ Y
Селектор предназначен для выбора элементов , которые расположены после . При этом элементы, определяемые селектором и , должны являться по отношению друг к другу соседями (сиблингами).
Например, выберет все элементы , расположенные после элемента на том же уровне вложенности.
Одно или два двоеточия ставить перед псевдоэлементами?
Короткий ответ для большинства случаев — без разницы.
Двойное двоеточие () было добавлено в CSS3, чтобы дифференцировать для различения псевдоэлементов типа и от псевдоклассов, таких как и . Все браузеры поддерживают двойное двоеточие, кроме Internet Explorer (IE) 8 и ниже.
При этом некоторые псевдоэлементы, например, работают только с двойным двоеточием.
Лично я использую одно двоеточие ради совместимости с устаревшими браузерами, разумеется, кроме тех случаев, когда псевдоэлементам требуется двойное двоеточие.
Вы можете выбрать любой вариант, здесь нет однозначного “за” или “против”.
Однако спецификация на момент написания статьи , по уже упомянутой здесь причине — обратной совместимости.
В заголовках этой статьи, псевдоэлементы, поддерживающие оба синтаксиса будут показаны в обоих вариантах, а, соответственно, псевдоэлементы работающие только с двойным двоеточием будут показаны с ним.
Когда использовать и не использовать генерируемый контент в CSS
Генерируемый контент в CSS реализуется с помощью комбинации свойства с псевдоэлементами или .
Контентом может быть простой текст или контейнер, которым мы манипулируем при помощи CSS, чтобы выводить графическую форму или декоративный элемент. Здесь я буду говорить о первом типе контента — тексте.
Генерируемый контент не стоит использовать для важного текста по следующим причинам:
- Он будет недоступен скрин-ридерам;
- Он будет невыделяем;
- Если генерируемый контент использует излишнее содержание для украшения, скрин-ридеры будут читать его, что ухудшит впечатления пользователей.
Используйте генерируемый контент для декорации и незначительного текста, но убедитесь, что он правильно обрабатывается скрин-ридерами, чтобы использующие эту технологию не отвлекались на него. Основывайтесь на методике “прогрессивного улучшения”, когда собираетесь использовать генерируемый контент.
На Smashing Magazine есть отличная статья Габриеля Романато об использовании генерируемого контента.
