Какие бывают селекторы в css
Перейти к содержимому

Какие бывают селекторы в css

  • автор:

CSS/Селекторы

Селектор выбирает элементы, для которых применяются пары свойство и значение.

body  background-image: url("image.gif"); font-size: 18px; > 

Где body — это селектор, background-image и font-size — это свойства, а url(«image.gif») и 18px — значения.

Виды селекторов [ править ]

  • Селектор тегов, в качестве селектора выступает имя тега, для которого необходимо изменить свойства.
  • Универсальный селектор, который обозначается символом * и применяется для изменения необходимых свойств всех элементов на странице.
  • Классы, применяются для элементов с атрибутом class и необходимым значением.
  • Идентификаторы, применяются для элементов с атрибутом id и необходимым значением. Основное отличие классов от идентификаторов состоит в том, что имена вторых должны быть уникальными, не повторяться, что позволяет их использовать вместе со скриптами (JavaScript).
  • Псевдо-классы предназначены для изменения стиля существующих элементов страницы в зависимости от их динамического состояния, например при работе со ссылками ( :link , :visited , :hover , :active , :focus ). Псевдо-элементы определяют стиль элементов, чётко не определённых в структуре документа ( :first-letter , :first-line ), а также позволяют генерировать и стилизовать несуществующее содержимое ( :before , :after и свойство content ). В CSS3 псевдо-элементы начинаются с двух двоеточий :: ( ::first-letter , ::first-line , ::before , ::after ).
  • Селекторы атрибутов. Позволяют стилизовать элемент не только по значению тега, но и по значению атрибута (a[attr]).
  • Контекстные селекторы. Стилизация элементов, находящихся внутри другого элемента (a b).
  • Дочерние селекторы. Стилизация элемента, расположенного сразу за другим элементом и являющегося его прямым потомком (a > b).
  • Соседние селекторы. Предназначены для стилизации соседних элементов, у которых общий родитель. (a + b)
  • Родственные селекторы. Похожи с соседними селекторами, но с тем различием, что стилизуются все соседние элементы, а не только первый соседний элемент. Впервые появились в CSS3. (a ~ b)

Селектор class [ править ]

Допустим, мы хотим сделать страницу, на которой будет два вида абзацев

, причём оба вида будут постоянно чередоваться и часто повторяться.

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

  Вопросы и ответы  
p.ask  font-style: italic; font-weight: bold; font-family: Arial, sans-serif; font-size: 10px; color: gray; margin-left: 15px; > p.answer  font-family: 'Times New Roman', serif; font-size: 12px; color: black; > 
style> head> body> p class="ask"> вопрос журналиста p> p class="answer"> ответ p> body> html> 

В приведённом примере вопросы журналиста будут отображаться шрифтом Arial серого цвета, полужирным курсивом, размером 10 пунктов с отступом 15 пикселов от левого края страницы. Ответы же будут отображены шрифтом Times New Roman размером 12 пунктов чёрного цвета. Вы можете создавать любое количество классов для любых элементов страницы.

Селектор id [ править ]

Возьмём следующий пример. Например, вы хотите создать на странице какие-либо уникальные элементы, к которым в будущем захотите вернуться из программ JavaScript. Возможно, эти элементы будут повторяться на других страницах, и вы хотели бы задать им единое оформление с помощью CSS. На этот случай в таблицах стилей есть возможность присваивать уникальным элементам идентификатор (id). Вот пример назначения идентификатора и правило CSS для таких элементов. Пример:

 html> head> title> Шрифт Courier title> meta charset="utf-8" /> style type="text/css"> 
#onlyThisOne  font-family: Courier; > 
style> head> body> p id="onlyThisOne"> Courier p> body> html> 

Аналогичным образом уникальные идентификаторы могут быть назначены любому количеству любых элементов на странице:

 html> head> title> Форма title> meta charset="utf-8" /> style type="text/css"> 
input#green  color: green; > input#red  color: red; > 
style> head> body> form action="handler.php" method="get"> p> Текст, введенный в это поле, будет отображен зеленым цветом: input type="text" id="green" name="info1" size="20" /> p> p> Текст, введенный в это поле, будет отображен красным цветом: input type="text" id="red" name="info2" size="20" /> p> input type="submit" value="Отправить" /> form> body> html> 

3. CSS – Селекторы: синтаксис, виды, правила и группировка

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

  • Селектор – это HTML-тег, к которому будет применяться стиль. Это может быть любой тег, например, или и т.д.
  • Свойство – это тип атрибута HTML-тега. Проще говоря, все атрибуты в HTML преобразуются в свойства CSS. Ими могут быть цвета, границы, отступы и т.д.
  • Значение – задается свойству. Например, свойство цвета может иметь значение green, #008000 и т.д.

Синтаксис селекторов в CSS следующий:

селектор

Синтаксис селекторов в CSS, селектор, свойство, значение, css, пример правила css

Пример. Вы можете задать границу таблицы следующим образом:

table

Здесь синтаксис селектора такой: table – это селектор, а border – свойство, а 2px solid #FF8C00 – значение этого свойства.

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

Стандартные селекторы

Это тот же самый селектор, который Вы видели выше. Опять же, еще один пример, чтобы дать цвет всем заголовкам первого уровня:

Универсальные селекторы

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

Это правило отображает в нашем документе содержимое каждого элемента в сером цвете.

Селекторы потомков или вложенные селекторы

ul em

Селекторы класса

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

.blue

Это правило отображает в нашем документе содержимое в синем цвете для каждого элемента с атрибутом class=»blue». Вы можете сделать селектор класса немного более конкретным. Например:

h1.blue

Это правило отображает содержимое в синем цвете только для элементов с атрибутом class=»blue».

Вы можете применить к одному элементу несколько селекторов класса. Рассмотрим следующий пример:

 

Этот абзац будет оформлен классами center и bold.

ID селекторы

Вы можете задать правила стиля для элементов на основе атрибутa id. Все элементы, имеющие этот идентификатор, будут отформатированы в соответствии с определенным правилом.

#blue

Это правило отображает в нашем документе содержимое в синем цвете для каждого элемента с атрибутом id=»blue». Вы можете сделать id селектор немного более конкретным. Например:

h1#blue

Это правило отображает содержимое в синем цвете только для элементов с атрибутом id=»blue».

Истинная мощность id селекторов – это когда они используются в качестве основы для селекторов-потомков, например:

#blue h2

В этом примере все заголовки второго уровня будут отображаться в синем цвете, когда они будут находиться в тегах с атрибутом id=»blue».

Дочерние селекторы

Вы уже знаете селекторы потомков. Существует еще один тип селектора, который очень похож на селекторы потомков, но имеет другую функциональность, это дочерний селектор. Рассмотрим следующий пример:

body > p

Соседние селекторы

HTML-элементы, идущие друг за другом, называются соседними. Рассмотрим следующий пример:

strong + em

Это правило будет отображать содержимое тега в синем цвете, если он идет после элемента . Другие теги , идущие не после тега , не будут иметь никакого эффекта этого правила.

Селекторы атрибутов

Вы также можете применять стили к HTML-элементам с определенными атрибутами. Ниже правило стиля будет соответствовать всем input элементам, имеющим атрибут type со значением text:

input[type = "text"]

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

Для селектора атрибутов применяются следующие правила:

  • p[lang] – выбирает все элементы абзаца с атрибутом lang.
  • p[lang=»ru»] – выбирает все элементы абзаца, где атрибут lang имеет точное значение «ru».
  • p[lang~=»ru»] – выбирает все элементы абзаца, где атрибут lang содержит слово «ru».
  • p[lang|=»ru»] – выбирает все элементы абзаца, где атрибут lang содержит значения, которые являются точными «ru» или начинаются с «ru».

Несколько правил стиля

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

Все пары свойств и значений разделяются точкой с запятой (;). Вы можете сохранить их в одной строке или нескольких строках. Для лучшей читаемости сохраняйте их в отдельных строках.

Не беспокойтесь о свойствах, упомянутых в вышеупомянутом блоке. Эти свойства будут объяснены в следующих уроках.

Группировка селекторов в CSS

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

h1, h2, h3

Это правило стиля будет применено к элементам h1, h2 и h3. Порядок списка при группировки селекторов не имеет значения. Все элементы в селекторе будут иметь соответствующие объявления, применяемые к ним.

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

#header, #content, #footer

Оглавление

  • 1. CSS – Самоучитель для начинающих
  • 2. CSS – Введение
  • 3. CSS – Селекторы
  • 4. CSS – Подключение
  • 5. CSS – Единицы измерения
  • 6. CSS – Цвета

Комбинированные селекторы

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

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

  1. Кратко
  2. Группировка: .element1, .element2
    1. Пример
    2. Как пишется
    3. Как понять
    1. Пример
    2. Как пишется
    3. Как понять
    1. Пример
    2. Как пишется
    3. Как понять
    1. Пример
    2. Как пишется
    3. Как понять
    4. Подсказки
    1. Пример
    2. Как пишется
    3. Как понять
    1. Пример
    2. Как пишется
    3. Как понять
    1. Realetive советует
    2. Роман Баранников советует

    Контрибьюторы:

    Обновлено 10 октября 2022

    Кратко

    Скопировать ссылку «Кратко» Скопировано

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

    Группировка: .element1 , . element2

    Скопировать ссылку «Группировка: .element1, .element2» Скопировано

    Пример

    Скопировать ссылку «Пример» Скопировано

    Если нескольким селекторам нужно задать одно и то же правило, то можно написать длинно:

     h1  font-weight: bold;> h2  font-weight: bold;> h3  font-weight: bold;> h1  font-weight: bold; > h2  font-weight: bold; > h3  font-weight: bold; >      

    А можно перечислить все селекторы через запятую и написать всего одно CSS-правило:

     h1, h2, h3  font-weight: bold;> h1, h2, h3  font-weight: bold; >      

    Как пишется

    Скопировать ссылку «Как пишется» Скопировано

    Селекторы просто записываются в произвольном порядке через запятую:

     .selector1,code,#id,[attr="value"]  color: red;> .selector1, code, #id, [attr="value"]  color: red; >      

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

     .heading span,.block,.wrapper  color: red;> .heading span, .block, .wrapper  color: red; >      

    Как понять

    Скопировать ссылку «Как понять» Скопировано

    В примере свойство применится для трёх типов селекторов:

    1. Для всех внутри класса .heading (на любом уровне вложенности);
    2. для всех элементов с классом .block ;
    3. для всех элементов с классом .wrapper .

    Объединение: .class1 . class2

    Скопировать ссылку «Объединение: .class1.class2» Скопировано

    Пример

    Скопировать ссылку «Пример» Скопировано

     .selector.selector_modificator  color: red;> .selector.selector_modificator  color: red; >      

    Как пишется

    Скопировать ссылку «Как пишется» Скопировано

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

    Как понять

    Скопировать ссылку «Как понять» Скопировано

    Такое «склеивание» объединяет селекторы в одно правило.

    Потомки: .element1 . element2

    Скопировать ссылку «Потомки: .element1 .element2» Скопировано

    Пример

    Скопировать ссылку «Пример» Скопировано

     article h3  color: red;> article h3  color: red; >      

    Как пишется

    Скопировать ссылку «Как пишется» Скопировано

    Селекторы записываются последовательно через пробел.

    Как понять

    Скопировать ссылку «Как понять» Скопировано

    Последовательность селекторов отражает вложенность — каждый следующий селектор должен обязательно находиться на каком-то уровне вложенности в предыдущий селектор.

    Непосредственно вложенные: .element1 > . element2

    Скопировать ссылку «Непосредственно вложенные: .element1 .element2» Скопировано

    Пример

    Скопировать ссылку «Пример» Скопировано

     article > h3  color: red> article > h3  color: red >      

    Как пишется

    Скопировать ссылку «Как пишется» Скопировано

    Селекторы разделяются знаком > .

    Как понять

    Скопировать ссылку «Как понять» Скопировано

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

     article > h3  color: red;> article > h3  color: red; >      

    К h3 . article _ _ heading стили для article > h3 не применятся, т. к. прямой потомок — div . article _ _ header , а не :

        

    Заголовок

    article class="article"> div class="article__header"> h3 class="article__heading">Заголовокh3> div> article>

    В этом примере стили к заголовку применятся, потому что является прямым потомком :

       

    Заголовок

    article class="article"> h3 class="article__heading">Заголовокh3> article>

    И тут тоже всё в порядке — по-прежнему является прямым потомком , потому что располагается на ближайшем уровне вложенности, хоть и следует после div . article _ _ header :

       

    Заголовок

    article class="article"> div class="article__header">div> h3 class="article__heading">Заголовокh3> article>

    Подсказки

    Скопировать ссылку «Подсказки» Скопировано

    �� Такая комбинация удобна, чтобы выбрать элемент, основываясь на его точном расположении в структуре документа.

    Смежные: .element1 + . element2

    Скопировать ссылку «Смежные: .element1 + .element2» Скопировано

    Пример

    Скопировать ссылку «Пример» Скопировано

     label + input  color: red;> label + input  color: red; >      

    Как пишется

    Скопировать ссылку «Как пишется» Скопировано

    Селекторы объединяются знаком + .

    Как понять

    Скопировать ссылку «Как понять» Скопировано

    Элемент справа от + должен следовать в HTML сразу за элементом слева от + . Проще говоря, правый элемент должен быть соседом левого элемента, чтобы смежный селектор сработал.

    Код из примера применится только к такому , который стоит сразу после :

     label + input  color: red;> label + input  color: red; >      

    К этому не применится, т. к. перед идёт :

      

    label>label> p>p> input>

    При такой разметке стиль применится только к первому , но не ко второму:

      label>Лейблlabel> input> input>      
      label>Лейблlabel> div> input> div>      

    Последующие: .element1 ~ . element2

    Скопировать ссылку "Последующие: .element1 ~ .element2" Скопировано

    Пример

    Скопировать ссылку "Пример" Скопировано

     .star:hover ~ .star  color: red;> .star:hover ~ .star  color: red; >      

    Как пишется

    Скопировать ссылку "Как пишется" Скопировано

    Селекторы объединяются с помощью символа ~ (тильда).

    Как понять

    Скопировать ссылку "Как понять" Скопировано

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

    На практике

    Скопировать ссылку "На практике" Скопировано

    Realetive советует

    Скопировать ссылку "Realetive советует" Скопировано

    �� Лучше записывать селекторы по одному на строчку — так их легче читать и редактировать:

     .selector1,code,#id,[attr="value"]  color: red;> .selector1, code, #id, [attr="value"]  color: red; >      

    �� Объединение увеличивает специфичность правила, поэтому это может быть удобно для переопределения свойств без !important :

    Код ниже нельзя редактировать по каким-то причинам:

     .class1  color: red;> .class1  color: red; >      

    Увеличим специфичность, чтобы переопределить правило, описанное в нередактируемой части и потому имеющее больший вес:

     .class1.class2  color: green;> .class1  color: red;> .class1.class2  color: green; > .class1  color: red; >      

    В итоге текст в блоке, имеющем сразу и класс .class1 и класс .class2 , будет зелёного цвета.

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

    Независимо от уровня вложенности селектор article h3 «найдёт» с текстом «Очень вложенный заголовок» и любые другие , которые располагаются внутри :

                

    Очень вложенный заголовок

    Заголовок

    article> div> div> div> div> div> div> div> div> div> h3>Очень вложенный заголовокh3> div> div> div> h3>Заголовокh3> div> div> div> div> div> div> article>

    + Развернуть

    Роман Баранников советует

    Скопировать ссылку "Роман Баранников советует" Скопировано

    �� С помощью смежного комбинатора удобно выбирать группу одинаковых элементов по принципу «все, кроме первого» — например, чтобы задать отступ.

     li + li  margin-top: 1em;> li + li  margin-top: 1em; >      

    Классический пример — вёрстка «звёздного» рейтинга. Для начала опишем структуру:

             div class="rating"> button>button> button>button> button>button> button>button> button>button> div>      
     button  border: none; background-color: transparent; font-size: 5em;> button:hover,button:focus,button:hover ~ button,button:focus ~ button  color: #F498AD;> button  border: none; background-color: transparent; font-size: 5em; > button:hover, button:focus, button:hover ~ button, button:focus ~ button  color: #F498AD; >      

    Но сейчас при наведении курсора будут выделяться все элементы после (то есть справа).

    Чтобы это исправить, мы изменим порядок следования элементов с помощью CSS-свойства direction : rtl .

    Добавим это свойство родителю звёздочек .rating :

     .rating  direction: rtl;> button  border: none; background-color: transparent; font-size: 5em;> button:hover,button:focus,button:hover ~ button,button:focus ~ button  color: #F498AD;> .rating  direction: rtl; > button  border: none; background-color: transparent; font-size: 5em; > button:hover, button:focus, button:hover ~ button, button:focus ~ button  color: #F498AD; >      

    Виды селекторов

    Селекторами могут быть любые элементы html, т. е. обычные теги.

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

    Группировка селекторов

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

    В данном случае весь текст, заключенный в теги td, h1 и h2 будет отображен красным цветом размером 16 пикселей.

    Селекторы классов

    Допустим, требуется красным цветом выделить некоторые заголовки и важные понятия в тексте, следует использовать селектор класса. Имя для класса выбирается пользователем и указывается после точки. Создадим класс с именем mystyle:

    Присвоение класса тегу происходит с помощью атрибута class . Рассмотрим HTML-код:

    Селекторы идентификаторов

    ID-селекторы задаются аналогично классам, однако каждый ID может быть применен только к одному элементу. Т. е. в коде страницы может быть только один тег с данным ID. Главное отличие синтаксиса ID-селекторов от селкторов класса в том, что в ID для адресации используется знак #, а не точка.

    HTML-код выглядит следующим образом:

    Селекторы потомков (контекстные селекторы)

    Можно написать стилевое определение, которое будет работать только при определенной комбинации вложенности тегов. Например, можно установить цвет I синим только для случая, если этот тег расположен внутри тега H3:

    Наследование

    Наследование в CSS — механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам. Стили, присвоенные некоторому элементу, наследуются всеми потомками (вложенными элементами), если они не переопределены явно.

    Тогда содержимое тега I , помещенного внутрь заголовка, будет также выведено на экран зеленым цветом:

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

    Каскадирование

    Начальные сведения о каскаде были даны в разделе "Общие сведения о языке CSS".

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

    Специфичность

    Чем меньшее количество элементов потенциально может выбрать селектор, тем он специфичнее.

    • если стиль встроенный, то а=1, иначе a=0;
    • значение b равно количеству идентификаторов в селекторе;
    • значение c равно количеству классов, псевдоклассов (псевдоклассы будут рассмотрены в следующем разделе);
    • значение d равно количеству селекторов элементов и псевдоэлементов.

    После этого полученное значение приводится к числу (обычно в десятичной системе счисления).

    Селектор a, b, c, d Число p 0, 0, 0, 1 1 p .mystyle 0, 0, 1, 1 11 p b 0, 0, 0, 2 2 #block 0, 1, 0, 0 100

    Селектор, обладающий бОльшим значением специфичности, обладает бОльшим приоритетом. Если селекторы обладают одинаковой специфичностью, то более высоким приоритетом обладает то правило, которое расположено в CSS-коде ниже.

    CSS-правила, которые прописаны во встроенной таблице стилей обладают наивысшим приоритетом. Однако существует способ переопределить из подключаемых CSS-файлов стили, заданные в атрибуте style. Для этого нужно использовать ключевое слово !important , которое задаёт CSS-свойству усиленный приоритет.

    Например, в связанной таблице стилей (файле style.css) содержатся правила:

    В css-файле правило, которое задает синий цвет текста абзаца, будет иметь приоритет над правилом, задающим зеленый цвет текста абзаца, т.к. оно располагается ниже, поэтому абзац 1 будет синего цвета.
    В html-коде используется встроенный стиль, определяющий красный цвет заголовка, но поскольку к правилу в связанной таблице добавлено ключевое слово !important, то заголовок будет отформатирован желтым цветом.
    В html-коде есть абзац с идентификатором paragraph. В связанной таблице стилей этот абзац выбирается двумя различными типами селекторов: селектором элемента, селектором идентификатора. Несмотря на то, что селектор элемента указан после идентификатора в каскаде, идентификатор имеет приоритет над селектором элемента, потому что он имеет большее значение специфичности, следовательно, абзац 2 будет серого цвета.

    Задание

    • Создайте стиль и примените его к одному из заголовков и одному понятию, выделенному полужирным шрифтом.

    • Создайте стили для написания старой и новой цены путевки. Старая цена — серого цвета, перечеркнутая. Новая цена — красного цвета, на 50% более крупного кегля, чем остальной текст.
    • Отформатируйте несколько фрагментов текста вне таблицы и в ячейках таблицы полужирным шрифтом. Создайте стиль, который должен применяться только к тексту, выделенному полужирным шрифтом, расположенному в ячейке таблицы. Если полужирный текст расположен вне таблицы, то стиль применяться не должен. Используйте селекторы потомков.

    Рассчитайте значения специфичности для селекторов:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *