Псевдоселекторы — Pseudo Selectors
Псевдоселекторы позволяют форматировать элементы на основе информации, отличной от позиции элемента в дереве документа. Селекторам псевдокласса и псевдоэлемента предшествует двоеточие и .
Псевдокласс используется для определения особого состояния элемента. Например, его можно использовать для стилизации элемента, когда пользователь наводит на него курсор, или для стилизации по-разному посещенных и непосещенных ссылок. Псевдоэлемент CSS используется для стилизации определенных частей элемента. Например, можно использовать для изменения первой буквы абзаца.
Рассмотрим в качестве примера один из селекторов псевдоэлементов CSS:
CSS
Copy
Пример HTML
Copy
Селектор по типу элемента
Селектор по типу элемента, также известный как элементный селектор, выбирает элементы на основе их названия тега в HTML. Ниже приведены несколько примеров:
Как вы видите я использую тэги span и article в качестве селекторов. Вы также можете технически придумать свои имена для тегов HTML и использовать их в CSS. Например, вы можете использовать следующий код HTML:
А затем следующий CSS-код:
Хотя это и работает, рекомендуется избегать подобной практики. Если вам нужен общий HTML-элемент, используйте или , а затем добавляйте классы и атрибуты данных по мере необходимости для настройки стилей.
CSS Селектор классов
Селектор классов выбирает HTML элементы с определенным атрибутом класса.
Чтобы выбрать элементы с определенным классом, напишите символ точки (.), за которым следует имя класса.
Пример
В этом примере все HTML элементы с class=»center» будет красным и выровненным по центру:
.center { text-align: center; color: red;}
Вы также можете указать, что класс должен влиять только на определенные HTML элементы.
Пример
В этом примере только элементы <p> с class=»center» будет выровнен по центру:
p.center { text-align: center; color: red;}
HTML элементы также могут ссылаться на несколько классов.
Пример
В этом примере элемент <p> будет задан стиль в соответствии с class=»center» и class=»large»:
<p class=»center large»>Этот параграф относится к двум классам.</p>
Примечание: Имя класса не может начинаться с цифры!
Селектор id[править]
Возьмём следующий пример. Например, вы хотите создать на странице какие-либо уникальные элементы, к которым в будущем захотите вернуться из программ JavaScript. Возможно, эти элементы будут повторяться на других страницах, и вы хотели бы задать им единое оформление с помощью CSS. На этот случай в таблицах стилей есть возможность присваивать уникальным элементам идентификатор (id). Вот пример назначения идентификатора и правило CSS для таких элементов. Пример:
<!DOCTYPE html>
<html>
<head>
<title>
Шрифт Courier
</title>
<meta charset="utf-8" />
<style type="text/css">
#onlyThisOne{
font-familyCourier;
}
</style>
</head>
<body>
<p id="onlyThisOne">
Courier
</p>
</body>
</html>
Отобразится как:
Courier
Аналогичным образом уникальные идентификаторы могут быть назначены любому количеству любых элементов на странице:
<!DOCTYPE html>
<html>
<head>
<title>
Форма
</title>
<meta charset="utf-8" />
<style type="text/css">
input#green{
colorgreen;
}
input#red{
colorred;
}
Псевдоклассы
Псевдоклассы используются в CSS чтобы применять к элементам разные процедуры форматирования. Синтаксис использования псевдоклассов следующий:
селекторпсевдокласс { property value; }
Существуют следующие псевдоклассы:
- active — Активная ссылка. Цвет ссылки меняется при нажатии на ней кнопки мыши.
- link — Непосещенная ссылка.
- hover — Ссылка при наведенном курсоре мыши.
- focus
- visited — Посещенная ссылка.
- first-letter — Определяет стиль для первого символа текстового блока.
- first-line — Устанавливает стиль для первой строки текстового блока.
- after
- before
Первые 4 псевдокласса применяются исключительно к гиперссылкам и задают формат гиперссылки в зависимости от ее состояния. Последующие 2 — к любому текстовому блоку.
Использование псевдоклассов для гиперссылок позволяет добиться довольно интересных эффектов. Таких, например, как создание ролловеров. Для этого можно задействовать стиль для класса элемента <a> и его псевдокласса hover:
Листинг: Псевдоклассы гиперссылок
/* Стилевые правила */
a.rollover {
color #660000;
text-decoration none;
}
a.rolloverhover {
color #FF0000;
text-decoration underline;
}
<!-- Применение в HTML -->
<a class="rollover" href="#">Ссылка-ролловер</a><br />
<a href="#">Обычная гиперссылка</a> <br />
Листинг: Unicode символы как иконки
<style>
.icon-test:before { content: " "; }
.icon-test:after { content: " \2652"; }
<style>
<head>
<body>
<span class="icon-test">Aquarius<span><button>♒ ♒<button>
Комбинатор соседних элементов
В CSS существует несколько комбинаторов, которые позволяют выбирать элементы на основе их расположения в документе. Один из таких комбинаторов – это комбинатор соседних элементов. Он определяется знаком плюса (+). С помощью этого комбинатора можно выбрать элемент, который непосредственно следует за первым элементом.
Один из наиболее распространенных случаев – это создание отступа для абзацев. В отличие от большинства абзацев в вебе, которые имеют двойной интервал и не имеют отступов, многие блоги используют метод, принятый в печатных изданиях, и отступают абзацы, следующие за другими абзацами.
Для этого используется CSS выше с помощью комбинатора соседних элементов. Таким образом, CSS применяет отступ только для абзацев, которые непосредственно следуют за другим абзацем. Первый абзац внутри родительского элемента не будет выбран.
The CSS class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the
class name.
Example
In this example all HTML elements with class=»center» will be red and center-aligned:
.center { text-align: center; color: red;}
You can also specify that only specific HTML elements should be affected by a class.
Example
In this example only <p> elements with class=»center» will be
red and center-aligned:
p.center { text-align: center; color: red;}
HTML elements
can also refer to more than one class.
Example
In this example the <p> element will be styled according to class=»center»
and to class=»large»:
<p class=»center large»>This paragraph refers to two classes.</p>
Note: A class name cannot start with a number!
Селекторы class и id
В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример:
<div id="first">текст в первом диве</div> <div class="second">текст во втором диве</div> <div id="third" class="first second third">текст в третьем диве</div>
На что стоит обратить внимание:
- Классы и идентификаторы можно присваивать любым (всем) тегам.
- Каждый id уникален и не может повторяться в пределах одной страницы, в отличие от классов!
- Один и тот же класс может быть присвоен любым тегам и может повторяться любое количество раз на странице.
- Если мы хотим задать конкретному тегу несколько классов, мы просто задаём их через пробел.
- Имена классов и идентификаторов могут совпадать, при этом кроме имени, ничего общего между ними не будет.
Как обратиться к классу или id в файле стилей (CSS)?
Смотрим пример:
#first {color: red;} /* обращаемся к id с именем first */
.second {color: blue;} /* обращаемся к классу с именем second */
#first .second {color: orange;} /* обращаемся к классу с именем second, ТОЛЬКО если он находится ВНУТРИ тега с идентификатором first */
.first .third {color: grey;} /* обращаемся к классу с именем third, ТОЛЬКО если он находится ВНУТРИ тега с классом first */
В нашем случае последние две инструкции не сработают, так как у нас нет классов, вложенных внутрь тегов с заданными атрибутами. Как вы могли заметить, чтобы обозначить, что мы обращаемся именно к id, нужно перед его именем без пробелов поставить знак решётки (#), если мы обращаемся к классу, то перед именем класса должны поставить точку (.).
Использование классов и идентификаторов очень удобно, но оно увеличивает нашу HTML разметку, в идеале (которого никогда нет) мы вовсе не должны их использовать, вместо них мы будем использовать комбинации и группировки селекторов, о них и будет вся остальная часть статьи, но! Но это совсем не означает, что вы должны полностью отказаться от использования классов и идентификаторов, просто вы должны иметь ввиду, что очень часто вместо создания нового class или id можно обойтись приёмами, описанными ниже и они также могут быть вполне удобны.
В чём различие class и id?
Кроме приведённых выше различий, стоит ещё отметить, что у свойств заданных id приоритет выше, чем у свойств, заданных классу. То есть, если мы напишем:
<style>
#first {color: red;}
.blue {color: blue;}
</style>
<div id="first" class="blue">текст в диве</div>
То цвет текста станет красным, несмотря на то, что класс находится ниже по коду и если бы у них был равный приоритет текст стал бы синим.
По синтаксису: в случаи с классом мы можем выбрать, у какого именно тега должен находиться данный класс, для этого после имени тега БЕЗ пробела мы должны обратиться к классу. Пример:
.myclass {свойства} /* применятся ко всем тегам, которые содержат класс myclass */
div.myclass {свойства} /* применятся только к тегам div, которые содержат класс myclass */
Для id это тоже будет работать, но такая запись лишена всякого смысла, так как id не может повторяться на странице, а значит достаточно просто объявлять id, без тега к которому оно относится:
<style>
#super {свойства} /* правильно */
div#super {свойства} /* Неправильно, но работать будет */
</style>
<div id="super">текст</div>
Вроде бы осталось только одно неоговорённое отличие, и оно касается темы, которую в ближайшем будущем я не планировал затрагивать на этом блоге – Javascript. Но всё же обязан доложить вам о нём: если вы хотите обратиться к элементу с помощью Javascript, то для этой цели очень удобным будет наличие id у этого элемента. Чтобы обратиться к элементу по его классу в Javascript нет такой встроенной возможности, вам придётся использовать вспомогательные функции + это не всегда кроссбраузерно.
![Селекторы [айти бубен]](https://rwvt.ru/wp-content/uploads/6/6/7/6672b4240f2664357d12b38f12873dfa.jpeg)
Итог: id и class используем, но в меру, при этом всегда спрашивая себя, а можно ли здесь обойтись без них и насколько это целесообразно.
Разрастание кода
Вне зависимости от того, можешь ли ты создать и поддерживать разметку, отвечающую за представление, остается вопрос а надо ли. Добавление оформительских шифров в изначально лаконичную разметку непременно приведет к её разрастанию, но что мы получим взамен? Позволит ли это упростить таблицы стилей?
Выбрав стилизацию, полностью полагающуюся на элементы, мы ошибочно предполагаем, что HTML-элементы существуют в вакууме, а не являются объектом наследования и не
принадлежат своему контексту. Рассматривая элемент как «штуку, для которой надо
написать стили», мы наделяем конкретный элемент избыточным значением и определяем для него стили, которые уже должны были быть определены выше в каскаде. Добавление новых модулей в проект приводит к неконтролируемому разрастанию кода.
Что касается препроцессоров с их одержимостью переменными и
объектно-ориентированными CSS-методологиями, переиспользуемыми объектами
классов — с их помощью мы сбрасываем балласт, чтобы остановить разрастание кода.
Это одержимость нашей индустрии. Однако большинство из них навязывают философию,
которая, в первую очередь, и порождает разрастание кода. Некоторые из них даже
навязывают плоскую структуру CSS, цитируя решение проблемы веса селекторов — сводя CSS к SS (Каскадные таблицы стилей к просто таблицам стилей. Без использования каскада. Примечание переводчика.) и отказываясь от одного из основных его достоинств.
Я не осуждаю эти подходы, но существуют и другие методы, которые могут оказаться
при определенных условиях более эффективными. А теперь пристегните ремни.
Селекторы атрибутов
Вы также можете применять стили к HTML-элементам с определенными атрибутами. Ниже правило стиля будет соответствовать всем input элементам, имеющим атрибут type со значением text:
Преимущество использования селекторов атрибутов заключается в том, что элемент <input type = «submit» /> не изменяется, а цвет применяется только к нужным текстовым полям.
Для селектора атрибутов применяются следующие правила:
- p – выбирает все элементы абзаца с атрибутом lang.
- p – выбирает все элементы абзаца, где атрибут lang имеет точное значение «ru».
- p – выбирает все элементы абзаца, где атрибут lang содержит слово «ru».
- p – выбирает все элементы абзаца, где атрибут lang содержит значения, которые являются точными «ru» или начинаются с «ru».
Специфичность правил
Любой элемент страницы относится к какому-то типу, может принадлежать к нескольким классам, иметь идентификатор и различные атрибуты. А это значит, что некоторые элементы могут попадать под действие сразу нескольких стилевых правил с различными селекторами.
Например, у нас имеется какой-то абзац, который принадлежит к классу и ему присвоен идентификатор (см. пример ниже).
<p id="first-paragraph" class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution.</p>
По типу данный элемент попадает под правило, устанавливающее стили для абзацев (см. пример ниже). По принадлежности к классу он попадает под правило для соответствующего класса. И, кроме того, на него распространяется правило, установленное для данного идентификатора.
p {
text-indent: 50px;
color: black;
}
#first-paragraph {
padding-left: 30px;
color: teal;
}
.content {
font-size: 10px;
color: gray;
}
Все объявления из этих правил, не противоречащие друг другу (то есть свойства , и ), будут применены к вышеприведённому абзацу. А вот из трёх объявлений, устанавливающих цвет текстового содержимого (свойство ), браузер выберет и применит только одно. И в своём выборе он будет руководствоваться специфичностью правил.
Специфичность правила (selector specificity) — это уровень его приоритета (весомость) в противоречивых ситуациях. Вес правила определяется видом базовых селекторов, а также их количеством, если это составные или контекстные селекторы.
Согласно при расчёте специфичности правила используются три группы оценок (A, B, C), которые формируются следующим образом:
- каждый селектор типа или псевдоэлемент даёт единицу в группу C;
- каждый селектор класса, атрибута или псевдокласс (кроме ) даёт единицу в группу B;
- каждый селектор идентификатора даёт единицу в группу A;
- универсальный селектор на оценки не влияет.
Таким образом, правила из вышеприведённого примера будут иметь следующие оценки:
p { ... }
#first-paragraph { ... }
.content { ... }
Сравнивая специфичность правил, браузер выбирает правило с максимальной оценкой в группе A. Если же у двух или более правил максимальная оценка в данной группе одинакова, браузер выбирает из них правило с максимальной оценкой в группе B. Если же и в этом случае находятся одинаковые результаты, сравнение продолжается по оценкам группы C.
Если у нескольких правил специфичность всё-таки окажется одинаковой, то к элементу будет применено объявление, стоящее в исходном коде последним.
Ещё примеры расчета специфичности правил:
* { ... }
li { ... }
ul li { ... }
ul ol+li { ... }
h1+* { ... }
ul ol li.red { ... }
li.red.level { ... }
#par1:not(.content) { ... }
Примечание: Псевдокласс при расчёте специфичности не учитывается, но учитываются селекторы, используемые в нём в качестве аргумента. Например, в контекстном селекторе две единицы в оценку группы C дадут селекторы типа и , и одну единицу в оценку группы B даст селектор класса . Присутствие же самого псевдокласса на оценки не повлияет.
div:not(.outer) p { ... }
В случае, если среди противоречащих друг другу объявлений имеется объявление с модификатором , ему присваивается наивысший уровень приоритета. А потому браузер использует для оформления элемента именно это объявление, независимо от специфичности других правил. Если модификатор имеется у нескольких таких объявлений, к элементу будет применено то, которое стоит в исходном коде последним. Подробнее о правилах каскадирования и модификаторе я рассказывал
Объявлениям из атрибута также присваивается высший уровень приоритета, но приоритет объявлений с модификатором является более высоким.
Правило для непосредственно соответствующего элемента всегда будет иметь больший приоритет, чем правила, унаследованные от родительских элементов.
Другие статьи по схожей тематике
- Способы указания цвета в стилевых свойствах
- Цвет переднего плана и фона веб-страницы
- Установка фонового рисунка
- Стилизация текста средствами CSS
- Списки на веб-страницах
- Горизонтальный разделитель
Селектор ID
Атрибут ID задает уникальное имя элемента, которое используется для изменения его стиля. Для назначения стиля элементу с заданным ID используется следующий синтаксис:
#идентификатор { правила форматирования }
После этого любой элемент, имеющий заданный ID примет указанные свойства форматирования. Ограничение состоит в том, что в любом XHTML документе не должны повторятся значения атрибутов ID его элементов, то есть, должна соблюдаться уникальность идентификатора.
Пример. Применение селектора ID
/* селектор в CSS */
#copyright {
txt-align center;
font-size 10pt;
font-weight bold;
color #996633;
border-top 1px dashed black;
}
<!-- Применение на странице -->
<p id="copyright">
© 2012.
</p>
The CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style
definitions.
Look at the following CSS code (the h1, h2, and p elements have the same
style definitions):
h1
{
text-align: center; color: red;
}h2
{
text-align: center; color: red;}p
{
text-align: center; color: red;
}
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
Example
In this example we have grouped the selectors from the code above:
h1, h2, p
{
text-align: center; color: red;}
All CSS Simple Selectors
| Selector | Example | Example description |
|---|---|---|
| #id | #firstname | Selects the element with id=»firstname» |
| .class | .intro | Selects all elements with class=»intro» |
| element.class | p.intro | Selects only <p> elements with class=»intro» |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element,element,.. | div, p | Selects all <div> elements and all <p> elements |
❮ Previous
Next ❯
CSS3 Учебник
CSS3 Закругленные углыCSS3 Изображен. границаCSS3 Слои фона изображ.CSS3 ЦветаCSS Ключевые сл. цветаCSS3 Градиент
Линейные градиенты
Радиальные градиенты
Конические градиенты
CSS3 Тени
Теневые эффекты
Тени бокса
CSS3 Эффект текстаCSS3 Веб шрифтыCSS3 2D ТрансформацияCSS3 3D ТрансформацияCSS3 ПереходCSS3 АнимацияCSS3 Всплыв. подсказкиCSS3 Стиль изображенияCSS3 Отраж. изображенияCSS3 Объект-подгонкаCSS3 Объект-позицияCSS3 МаскировкаCSS3 КнопкиCSS3 ПагинацияCSS3 Несколько столбцовCSS3 ИнтерфейсCSS3 Переменные
Переменная var()
Переопределение
Переменные с JS
Медиа-запросы
CSS3 Размеры боксовCSS3 Медиа запросыCSS3 Медиа примерыCSS3 Флексбокс
CSS Гибкий бокс
CSS Flexbox контейнер
CSS Flexbox элементы
CSS Flexbox отзывчивый
Родственный селектор
Идём дальше. Из статьи о наследовании в CSS вы уже знаете о двух самых простых видах селекторов, это селектор по тегу (элементу) и по потомку. Давайте освежим вашу память:
div p {color: green;} /* Селектор по потомку */
p {color: red;} /* селектор по тегу */
Но как я уже писал в предыдущей статье, в первом случае CSS свойства применятся ко всем тегамp вложенным на ЛЮБУЮ глубину тега div. А что если мы хотим применить свойства только к прямым наследникам, то есть к первому уровню вложенности:
<div> <p>Прямой наследник (первый уровень)</p> <span> <span> <p>Третий уровень</p> </span> </span> <p>Прямой наследник (первый уровень)</p> <span> <p>Второй уровень</p> </span> <p>Прямой наследник (первый уровень)</p> </div>
В таком случае мы должны использовать так называемый родственный селектор, для его обозначения используется угловая скобка, пробелы можете ставить, можете не ставить, я бы не советовал:
div>p {color: blue;} /* только первый уровень вложенности */
div p {color: blue;} /* абсолютно все параграфы внутри div */
Заключение
Я плохой математик, но произвели на меня большое впечатление: набор тривиальных правил, или аксиом, которые формируют основу для
сложного и прекрасного предмета — геометрии. Благодаря Эвклиду я понимаю, что
даже наиболее сложные системы должны быть основаны на элементарных правилах, и это также будет верно в отношении CSS. Кроме того, разбиение на модули сложного
интерфейса — это необходимый шаг на пути его взросления, и любой интерфейс, который не следует этим базовым принципам, потеряет свою прозрачность.
Совиный селектор дает вам контроль над поточным контентом, но, кроме того, это еще и способ отказа от контроля. Стилизируя элементы в соответствии контексту и
обстоятельствам, мы принимаем то, что структура нашего контента является — и должна быть — изменчивой. Вместо того чтобы предопределять представление интерфейса в целом, мы позволяем контенту определять его. Мы возвращаем контроль людям, которые его создают.
Если вы совсем отключите CSS на странице, вы, возможно, заметите две вещи. Первая — то, что страница упорно сохраняет гибкость: контент укладывается в область просмотра независимо от ее размеров. Вторая — при условии, что вы написали соответствующую стандарту и доступную разметку, вы, наверное, увидите, что контент уже стилизован если и не особо красивым, то хотя бы приемлемым образом. Встроенные стили браузера позаботились и об этом.
Наши усилия по освоению и улучшению изначальной независмости от устройств, предоставляемой браузерами, не прекращаются. Пришла пора поработать, чтобы вернуть независимость и от контента.