простой селектор — (simple selector)
составной селектор — (compound selector)
сложный селектор — (complex selector)
Самый большой вес у style = 1000. Его лучше не использовать, но если использовали, то чтобы его переопределить прийдеться нужно добавить !important к значению свойства в таблице стилей.
Например:
background: mediumspringgreen !important;
селекторы ID для определение стилей лучше не использовать.
Следующий очевидный способ — добавить #container ко второму селектору, чтобы увеличить его вес:
Это тоже сработает, но решение так себе: удлиняется цепочка селекторов (что может отразиться на скорости отрисовки страницы) и ухудшается читаемость кода. Так тоже делать не стоит.
1-й и 2-й способ могут использоваться, если у вас нет доступа к разметке, а в ней нет нужных классов. Если же вы можете редактировать разметку либо классы у элементов таки есть — используйте последний способ, самый правильный:
3. Просто не используйте в стилях селекторы с ID, используйте классы.
Посмотрим на разницу между #container и с .container:
#container A.......0,1,0,1 — селектор с ID перевешивает всё вне зависимости от своего расположения в коде.
Заменим в разметке страницы id на class:
.container A.......0,0,1,1 — селектор с классом весит меньше, он менее специфичен.
Селектор ссылок в списке весит столько же:
.list A.............0,0,1,1
Это означает, что при равном весе селекторов применятся стили, объявленные ниже в коде. То есть достаточно будет просто написать стили, следуя от общего к частному, сверху вниз.
В итоге разметка может быть такой:
А стили — такими:
И код работает так, как ожидается:
В качестве общих рекомендаций так же следует упомянуть, что нужно как можно меньше использовать селекторы по тегу и как можно больше — селекторы по классу. Это поможет избежать проблем при повторном использовании блоков сайта, а при использовании «умных» классов — может значительно сократить цепочки селекторов, увеличить читабельность кода и скорость отрисовки страницы.
Составной Селектор.
Примеры селекторов.
Псевдокласс (режимы ноды)
- :active – создает эффект, как будто мы зажали на элементе левую кнопку мыши;
- :hover – воспроизводится эффект наведения курсора;
- :focus – как-будто поставили на элементе фокус. Например, клавишей Tab.
- :visited – изменяет цвет ссылки на фиолетовый, как-будто мы уже ранее перешли по ней.
простой селектор — (simple selector)
составной селектор — (compound selector)
сложный селектор — (complex selector)
CSS селекторы
Селектор — это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применён стиль.
Термин селектор может относиться к простому селектору (simple selector), составному селектору (compound selector), сложному селектору (complex selector) или списку селекторов.
К простым селекторам относятся:
- селектор типа
- универсальный селектор
- селекторы атрибутов
- селектор идентификатора
- селектор класса
- псевдо-классы
| CSS селектор | Пример | Описание | CSS |
|---|---|---|---|
| .class | .myClass | Выбирает все элементы с классом myClass (class="myClass"). | 1 |
| #id | #main | Выбирает элемент с идентификатором main (id="main"). | 1 |
| * | * | Выбор всех элементов. | 2 |
| элемент | span | Выбор всех элементов <span>. | 1 |
| элемент,элемент | div,span | Выбор всех элементов <div> и всех элементов <span>. | 1 |
| [атрибут] | [title] | Выбирает все элементы с атрибутом title. | 2 |
| [атрибут=’значение’] | [title="cost"] | Выбирает все элементы с атрибутом title, значение которого в точности совпадает со значением указанным в селекторе (title="cost"). | 2 |
| [атрибут~=’значение’] | [title~="один"] | Выбирает все элементы с атрибутом title, в значении которого (в любом месте) встречается подстрока (в виде отдельного слова) «один» (title="один и два"). | 2 |
| [атрибут|=’значение’] | [lang|="ru"] | Выбор всех элементов с атрибутом lang, значение которого начинается с «ru». | 2 |
| [атрибут^=’значение’] | a[href^="https"] | Выбор каждого элемента <a> с атрибутом href, значение которого начинается с «https». | 3 |
| [атрибут$=’значение’] | [src$=".png"] | Выбирает все элементы с атрибутом src, значение которого оканчивается на «.png» (src="some_img.png"). | 3 |
| [атрибут*=’значение’] | [title*="один"] | Выбирает все элементы с атрибутом title, в значении которого (в любом месте) встречается подстрока (в виде отдельного слова или его части) «один» (title="один и два"). | 3 |
Составной селектор — это последовательность простых селекторов, которые не разделены комбинаторами, т. е. за одним селектором сразу идёт следующий. Он выбирает элемент, который соответствует всем простым селекторам, которые он содержит. Селектор типа или универсальный селектор, входящий в составной селектор, должен быть расположен первым в этой последовательности. В составном селекторе допустим только один селектор типа или универсальный селектор.
| 12 | span[title].classNamep.className1.className2#someId:hover |
Сложный селектор — это последовательность селекторов, которые разделены комбинаторами.
Список селекторов — это селекторы, перечисленные через запятую.
Комбинаторы
Для объединения простых CSS селекторов, используются комбинаторы, которые указывают взаимосвязь между простыми селекторами. Существует несколько различных комбинаторов в CSS2, и один дополнительный в CSS3, когда вы их используете, они меняют характер самого селектора.
| Комбинатор | Пример | Описание | CSS |
|---|---|---|---|
| элемент элемент | div span | Выбор всех элементов <span> внутри <div>. | 1 |
| элемент>элемент | div>span | Выбирает все дочерние элементы <span>, у которых родитель — элемент <div>. | 2 |
| элемент+элемент | div+p | Выбирает все элементы <p>, которые расположены сразу после элементов <div>. | 2 |
| элемент1~элемент2 | p~ol | Выбор всех элементов <ol>, которым предшествует элемент <p>. | 3 |
Псевдо-классы
Псевдо-класс – это простой селектор, который используется для выбора того, что не может быть выбрано с помощью других селекторов или может быть выбрано, но достаточно трудным способом.
| Псевдо-класс | Пример | Описание | CSS |
|---|---|---|---|
| :link | a:link | Выбор всех не посещенных ссылок. | 1 |
| :visited | a:visited | Выбор всех посещенных ссылок. | 1 |
| :active | a:active | Выбор активной ссылки. | 1 |
| :hover | a:hover | Выбор ссылки при наведении курсора мышки. | 1 |
| :focus | input:focus | Выбор элемента <input>, который находится в фокусе. | 2 |
| :first-child | p:first-child | Выбор каждого элемента <p>, который является первым дочерним элементом своего родителя. | 2 |
| :lang(язык) | p:lang(ru) | Выбор каждого элемента <p> с атрибутом lang, значение которого начинается с «ru». | 2 |
| :first-of-type | p:first-of-type | Выбор каждого элемента <p>, который является первым из элементов <p> своего родительского элемента. | 3 |
| :last-of-type | p:last-of-type | Выбор каждого элемента <p>, который является последним из элементов <p> своего родительского элемента. | 3 |
| :only-of-type | p:only-of-type | Выбор каждого элемента <p>, который является единственным элементом <p> своего родительского элемента. | 3 |
| :only-child | p:only-child | Выбор каждого элемента <p>, который является единственным дочерним элементом своего родительского элемента. | 3 |
| :nth-child(n) | p:nth-child(2) | Выбор каждого элемента <p>, который является вторым дочерним элементом своего родительского элемента. | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | Выбор каждого элемента <p>, который является вторым дочерним элементом своего родительского элемента, считая от последнего дочернего элемента. | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | Выбор каждого элемента <p>, который является вторым дочерним элементом <p> своего родительского элемента. | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Выбор каждого элемента <p>, который является вторым дочерним элементом <p> своего родительского элемента, считая от последнего дочернего элемента. | 3 |
| :last-child | p:last-child | Выбор каждого элемента <p>, который является последним элементом своего родительского элемента. | 3 |
| :root | :root | Выбор корневого элемента в документе. | 3 |
| :empty | p:empty | Выбор каждого элемента <p>, который не содержит дочерних элементов (включая текст). | 3 |
| :target | :target | Выбор текущего целевого элемента на странице, то есть элемента, к которому был осуществлён переход по ссылке внутри страницы. | 3 |
| :enabled | input:enabled | Выбор каждого включенного элемента <input>. | 3 |
| :disabled | input:disabled | Выбор каждого выключенного элемента <input>. | 3 |
| :checked | input:checked | Выбор элемента <input>, выбранного по умолчанию или пользователем. | 3 |
| :not(селектор) | :not(p) | Выбор всех элементов, кроме элемента <p>. | 3 |
Псевдо-элементы
Псевдо-элемент – это виртуальный элемент, который не существует в явном виде в дереве элементов документа. Псевдо-элементы используются для выбора тех частей элемента, которые не могут быть выбраны с помощью других селекторов, а также для стилизации не всего элемента, а отдельных его частей.
| Псевдо-элемент | Пример | Описание | CSS |
|---|---|---|---|
| ::first-letter | p::first-letter | Выбор первой буквы каждого элемента <p>. | 1 |
| ::first-line | p::first-line | Выбор первой строки каждого элемента <p>. | 1 |
| ::before | p::before | Добавляет элемент с содержимым перед содержимым каждого элемента <p>. | 2 |
| ::after | p::after | Добавляет элемент с содержимым после содержимого каждого элемента <p>. | 2 |
CSS селекторы — https://puzzleweb.ru/css/selectors.php
