Содержание

Комбинаторы — Изучение веб-разработки | MDN

  • Назад
  • Обзор: Building blocks
  • Далее

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

Необходимые условия:Базовая компьютерная грамотность, установленное базовое программное обеспечение, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Цель:Узнать о различных комбинаторных селекторах, которые могут быть использованы в CSS.

Селектор потомка — обычно представляется символом пробела (» «) — соединяет два селектора так, что элементы, соответствующие второму селектору, выбираются, если они имеют предка (родителя, родителя родителя, родителя родителя родителя и т.

д.), соответствующего первому селектору. Селекторы, которые используют комбинатор потомка, называются селекторами потомка.

body article p

В приведённом ниже примере выбирается только тот элемент <p>, который находится внутри элемента с классом.box.

Дочерний комбинатор (>) помещается между двумя селекторами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы <p>, которые являются дочерними элементами

<article>, селектор пишется так:

article > p

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

Если вы уберёте символ >, указывающий на то, что это селектор с дочерним комбинатором, селектор превратится в селектор всех потомков (комбинатор — пробел) и все элементы <li>

получат верхнюю границу красного цвета.

Соседний родственный селектор (+) используется для выбора элемента, который непосредственно следует за другим элементом и находится на одном с ним уровне иерархии. Например, чтобы выбрать все элементы <img> , которые идут сразу после элементов <p> :

p + img

Распространённый вариант использования — сделать что-то с абзацем, который следует за заголовком, как в примере ниже. Здесь мы ищем абзац, который непосредственно примыкает к <h2>, и стилизуем его.

Если вы вставите какой-то другой элемент, например <h3> между <h2>

и <p>, вы обнаружите, что абзац больше не соответствует селектору и поэтому не получает цвет фона и переднего плана, применяемый, когда элемент является соседним.

Если вы хотите выбрать родственные элементы, даже если они не являются непосредственными соседями, то вы можете использовать общий родственный комбинатор (~). Чтобы выбрать все элементы <img>, которые находятся в любом месте после элементов <p>, надо указать так:

p ~ img

В приведённом ниже примере мы выбираем все элементы <p>, которые идут после

<h2>, и хотя в документе есть также <div>, тем не менее <p>, который идёт после него, будет выбран.

Вы можете соединять с помощью комбинаторов любые селекторы, которые мы изучали в предыдущих уроках, чтобы выбрать часть вашего документа. Например, если мы хотим выбрать пункты списка с классом «a», которые являются прямыми потомками <ul>, можно использовать следующую комбинацию:

ul > li[class="a"]  {  }

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

Будет трудно повторно использовать правила CSS, так как вы сделали селектор очень специфичным для определения местоположения этого элемента в разметке.

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

Мы охватили много тем в этой статье. А вы можете вспомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите Проверьте ваши навыки: Селекторы.

Это последний раздел в наших уроках по селекторам. Далее мы перейдём к другой важной части CSS — CSS модель коробки.

  • Назад
  • Обзор: Building blocks
  • Далее
  1. Каскад и наследование
  2. Селекторы CSS
    • Селекторы типа, класса и ID
    • Селекторы атрибута
    • Псевдоклассы и псевдоэлементы
    • Комбинаторы
  3. Модель коробки
  4. Фон и границы
  5. Обработка разных направлений текста
  6. Переполнение содержимого
  7. Значения и единицы измерения
  8. Изменение размеров в CSS
  9. Элементы изображений, форм и медиа-элементы
  10. Стилизация таблиц
  11. Отладка CSS
  12. Организация вашей CSS

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.
Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

CSS селекторы, свойства, значения

Каскадная таблица стилей состоит из CSS правил. Каждое CSS правило состоит из селектора и блока декларации.

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

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

Каждая декларация состоит из имени свойства и его значения, разделенных двоеточием.

Свойства – это ключевые слова, такие как

color, font-weight или background-color, которым присвоены определенные значения:

body {
   font-size: 0. 8em;
   color: navy;
}

В данном примере создается CSS селектор body, который соотносится с HTML тегом <body>. В этом селекторе определяется два свойства – font-size и color, которым присваиваются соответствующие значения. Таким образом, если этот стиль подключить к HTML документу, то текст внутри элемента <body> (что на самом деле весь контент в основном окне браузера) будет отображаться шрифтом размером 0.8em и темно-синим цветом.

CSS селекторы можно разделить на пять категорий:

  • Простые селекторы (элементы отбираются по имени, идентификатору или классу)
  • Комбинированные селекторы (элементы отбираются по специфическим отношениям между ними)
  • Селекторы псевдоклассов (элементы отбираются по определенному состоянию)
  • Селекторы псевдоэлементов (отбирается и стилизуется часть элемента)
  • Селекторы атрибутов (элементы отбираются по атрибутам или значениям атрибутов)

CSS селектор элемента

Селектор элемента или HTML селектор — это простой селектор, который отбирает HTML элементы по их имени.

В следующем примере отбираются все существующие на странице элементы <p>. Их текст будет красного цвета и выровнен по центру:

p {
  text-align: center;
  color: red;
}

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

CSS селектор идентификатора

Селектор идентификатора для отбора заданного элемента использует атрибут id HTML элемента.

Идентификатор элемента уникален в пределах веб-страницы, таким образом селектор идентификатора используется для выбора одного уникального элемента!

Чтобы определить селектор идентификатора, нужно написать символ решетки (#) и имя идентификатора элемента.

В следующем примере определяются стили для HTML элемента с идентификатором:

#para1 {
  text-align: center;
  color: red;
}

Внимание! Имя идентификатора не может начинаться с цифры!

CSS селектор класса

Селектор класса для отбора заданного элемента использует атрибут class HTML элемента.

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

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

.center {
  text-align: center;
  color: red;
}

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

В следующем примере только элементы <p> с классом будут отображать текст красного цвета, который выровнен по центру:

p.center {
  text-align: center;
  color: red;
}

Также, HTML элементы могут иметь больше одного класса.

В следующем примере элемент <p> будет принимать стили, соответствующие селекторам класса и:

<style>
p.center {
  text-align: center;
  color: red;
}
p.large {
  font-size: 300%;
}
</style>
<p>Этот параграф определен по двум классам.</p>

Внимание! Имя класса не может начинаться с цифры!

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

Универсальный селектор (*) отбирает абсолютно все HTML элементы на странице.

Следующее CSS правило окажет воздействие на каждый HTML элемент на странице:

* {
  text-align: center;
  color: red;
}

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

Группирование селекторов позволяет объединить одно и то же определение стиля для нескольких HTML элементов в одну декларацию.

Посмотрите на следующий код CSS (для элементов h2, h3 и p заданы одинаковые стили):

h2 {
  text-align: center;
  color: red;
}
h3 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}

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

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

В следующем примере мы группируем селекторы из предыдущего примера:

h2, h3, p {
  text-align: center;
  color: red;
}

селекторов CSS3 | Список селекторов CSS3, псевдоселекторы CSS3

Автор: Авинаш Малхотра

Обновлено:

  • ← Учебник по CSS3
  • CSS-переменные и функции →

Оценка учебника по CSS3 от Yash ⭑ ⭑ ⭑ ⭑ ⭑ Средняя оценка: 5,0 на основе 186 отзывов

  1. Дом
  2. Веб-дизайн
  3. CSS3
  4. Селекторы CSS3
  1. Селекторы CSS3
  2. Рациональные селекторы
  3. Селекторы атрибутов
  4. Псевдоселекторы
  5. Структурный псевдо

Селекторы CSS3

селектора CSS3 включает в себя все селекторов CSS от до CSS3. Список селекторов CSS3 включает селекторов Rational , Combinator , Группировка и Псевдоселекторы .

Более ранние версии CSS используют Type , class , id и дочерние селекторы . CSS 2 добавляет еще псевдоэлементов , псевдоклассов и селекторов комбинаторов . А теперь с помощью CSS3 мы можем нацеливаться практически на любой элемент с помощью широкого диапазона селекторов вариантов. Эван, в этой статье мы обновили CSS-селекторов уровня 4 .

Селекторы CSS3 являются частью HTML5.

Здесь мы подробно обсудим все селекторы CSS, CSS2, CSS2.1, CSS3 и CSS 4 уровня .

Список селекторов CSS

  1. Рациональные селекторы
  2. Селекторы атрибутов
  3. Псевдоселекторы
  4. Структурные псевдоселекторы

Нет селекторов для целевого родительского элемента и предыдущего родственного элемента в css.

Рациональные селекторы или комбинатор

Рациональные селекторы или Комбинатор нацеливаются на элементы на основе их связи с другими элементами. Эти селекторы были впервые представлены в CSS1, а затем снова в css2 и css3.

Рациональные селекторы CSS или комбинатор
Селектор Код CSS Использовать CSS Уровень

Селектор потомков

раздел р{ } Нацелить все теги p внутри div. Это включает в себя все элементы p, которые являются потомками ( дочерними элементами, внуками, правнуками и т. д.) div. 1

Детский селектор

дел.>р{ } Этот селектор соответствует только прямому потомку из элемент 2

Смежный брат

h5+p{ } Этот селектор соответствует тегу p рядом с h5, и оба имеют один и тот же родительский элемент . Это означает, что p должно идти сразу после h5. 2

Общий родственный

h4~p{ } Этот селектор соответствует всем элементам P точно после элемента h4. 3

General Sibling т. е. ( A~B ) селектор будет работать только в браузерах с поддержкой HTML5. IE 8 и более ранние версии не поддерживают этот селектор.

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

Селекторы атрибутов были введены в css level 2 или css2. Селекторы атрибутов нацеливают соответствующие элементы на основе атрибут и значение атрибута. Селекторы атрибутов используются с использованием квадратных скобок [] . Селекторы атрибутов могут нацеливаться на оба атрибута со значением или логическими атрибутами.

Селекторы атрибутов CSS
Селектор CSS Использовать Уровень CSS

E[атрибут]{}

Нацельтесь только на элемент E или элементы, имеющие точное значение атрибута без учета регистра. Для ввода опыта с отключенным атрибутом,
ввод [отключено] {курсор: не разрешено}		 2

E[attr=»значение»]{}

Этот селектор соответствует только элементу с точным атрибутом и значением. Для exp, только флажок типа ввода,
input[ type=»checkbox» ]		 2

E[attr~=»foo»]{}

Этот селектор соответствует только элементам с точным атрибутом с несколькими значениями, разделенными пробелом, и одно из значений точно равно «foo». 9= «кол»] 3

E[attr$=»значение»]{}

Этот селектор соответствует только элементу E, значение атрибута которого заканчивается точно на foo. Например, div с именем класса, заканчивающимся на «wrap»,
div[ class$=»wrap» ]		 3

E[атрибут*=»значение»]{}

Этот селектор соответствует только элементу E, значение атрибута которого содержит подстроку «foo». Для exp, div, имеющий имя класса с подстрокой «md»,
раздел[класс*=»мд»]		 3

E[attr=»value» i]{}

Этот селектор соответствует только элементу E со значением атрибута «value» или «VALUE». я имею в виду чувствительный к регистру. Для exp, div с именем класса «col» или «COL»,
div[i]		 4

E[attr=»value» s]{}

Этот селектор соответствует только элементу E со значением атрибута, равным только «значению». Для exp, div с именем класса «col», 9=foo»]{} , E[attr$=foo»]{} и E[attr*=foo»]{} селекторы атрибутов будут только в поддерживаемых HTML-5 браузерах. IE 8 и младше не поддерживает эти селекторы.

Псевдоселекторы

Псевдоселекторы CSS классифицируются как Псевдокласс и Псевдоэлементы . Эти селекторы впервые появились в css1, а затем снова в css2 и css3. Псевдоселекторы CSS вызываются с использованием двоеточия : . В CSS3 мы используем двойные двоеточия :: для псевдоэлементов, но одинарное двоеточие также поддерживается.

Псевдоселекторы CSS
Код CSS Использовать Уровень CSS

Электронная почта: ссылка {}

Элемент E (якорь) с гиперссылкой, который еще не посещался . 1

E:посетили{}

Элемент E (якорь) с гиперссылкой, который уже посещался согласно истории браузеров. 1

Э: наведение {}

Изменить стиль при наведении курсора на состояние элемента E. Опыт 1 и 2

E:фокус {}

Изменить стиль на фокус состояние элемента E. Как правило, все элементы управления формой поддерживают состояние фокуса. 1 и 2

E:активный {}

Изменить стиль на нажатой клавише мыши состоянии элемента E. 1 и 2

: включить{}

Активный элемент пользовательского интерфейса. опыт 3

: отключить {}

Отключенный элемент пользовательского интерфейса. опыт
<стиль>
    ввод [тип = "текст"]: отключен {курсор: не разрешено}
3

:только для чтения{}

Отключенный элемент пользовательского интерфейса. опыт
<стиль>
    ввод [тип = "текст"]: только для чтения {курсор: не разрешено}
3

E:проверен{}

Для флажков и переключателей, которые отмечены или не отмечены.

: Я согласен

<стиль>
    ввод [ тип = "флажок"] ~ диапазон { цвет: красный }
    input[ type="checkbox"]:checked~span{color:green}

: Мужчина : Женский

<стиль>
    ввод [ тип = "радио"] ~ диапазон { цвет: красный }
    ввод [ тип = "радио"]: отмечен ~ диапазон { цвет: зеленый }

 
 
                          9[0-9]{4}$" required maxlength="4">: введите PIN-код банкомата
3

: неверный {}

Применимо к элементам, которые являются недействительными в зависимости от их типа и шаблона. Для банкомата exp

PIN-код:

<стиль>
 ввод [тип = "текст"]: действителен { box-shadow: 0px 0px 5px 1px зеленый}
 ввод [тип = "текст"]: недействительный { box-shadow: 0px 0px 5px 1px красный}
3

: требуется {}

Применимо к элементам ввода, имеющим обязательный атрибут . Для exp

Введите имя:

<стиль>
 ввод: требуется { box-shadow: 0px 0px 5px 1px #ffae15 }
3

:необязательно{}

Применимо к элементам ввода, у которых нет обязательного атрибута . Для опыта

Имя:

<стиль>
 ввод: необязательный { box-shadow: 0px 0px 5px 1px #e83edb }
3

:в диапазоне{}

Применимо к диапазону и номер типа ввода элемент, когда значение находится в диапазоне . Для опыта

введите возраст:

<стиль>
 ввод: в диапазоне { box-shadow: 0px 0px 5px 1px зеленый}
3

:вне диапазона{}

Применимо к диапазон и номер типа ввода элемент, когда значение выходит за пределы диапазона . Для опыта

введите возраст:

<стиль>
 ввод: вне диапазона { box-shadow: 0px 0px 5px 1px красный }
3

: фокус внутри

:focus-in псевдоселектор выбирает элемент, когда дочерний элемент находится в фокусе.

Фокус на входах ниже

<стиль>
    .коробка{
        граница: сплошная 1px;
        поле: 10 пикселей;
        отступ: 10 пикселей;
        фон:#fff;
    }
    .box:фокус внутри{
        фон:#5c97d5;
    }
4

: цель

:целевой псевдоселектор
  • сек 1
  • сек 2
  • Секунда 3

Секунда 1

Секунда 2

Секунда 3

        
<стиль>
    . раздел{
        фон:#ccc;
        граница: сплошная 1px;
        отступ: 10 пикселей;
        поле: 10 пикселей;
     }
    .section:target{фон:#333; цвет:#fff}

   
Секунда 1
Раздел 2
Раздел 3

Раздел 1


Раздел 2


Раздел 3
3

Совместимость с браузерами

:hover не поддерживается в IE6 и ниже. IE7 и ниже не поддерживает :focus . Однако все селекторы уровня 1 и уровня 2 поддерживаются в IE8, кроме ( :checked, :enabled, :disabled и :target ). Хорошей новостью является то, что IE9 и выше поддерживают все селекторы CSS уровня 1, 2, 3 и 4.

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

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

Код CSS Использовать Уровень CSS

E:корень

Элемент E, корень документа. 2

:первый ребенок

Цели только первый дочерний элемент Родительский элемент. Для опыта
  • Список 1
  • Список 2
  • Список 3
<стиль>
 уль ли: первый ребенок { цвет: # a94442}

 <ул>
     
  • Список 1
    • 
     
  • Список 2
    • 
     
  • Список 3
    •
    		2

    : первая линия

    		Нацеливается только на первую строку элемента. Для опыта,

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque ducimus delectus recusandae nisi dolore tenetur doloremque voluptas, ad inventorye earum quos harum illo mollitia magnam velit cum asperiores. Earum, voluptatem. 

    <стиль>
 p: первая строка {цвет: красный}


    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident suscipit magnam ad architecto magni optio alias quibusdam aliquam incidunt eligendi tempore quam nobis nisi non, similique minus, nihil deleniti neque.
    		1

    : первая буква

    		нацелен только на первую букву элемента, для расширения,

    Lorem ipsum dolor sit amet.

    <стиль>
 р: первая буква { цвет: красный; размер шрифта: 2em}


    Lorem ipsum dolor sit amet.
    		1

    :последний ребенок

    		Цели только последний дочерний элемент Родительский элемент. Для опыта
    • Список 1
    • Список 2
    • Список 3
    <стиль>
 ul li: последний ребенок {цвет: # a94442}

 <ул>
     
  • Список 1
    • 
     
  • Список 2
    • 
     
  • Список 3
    •
    		3

    :n-й ребенок(n)

    		Нацелен только на n-й дочерний элемент родительского элемента. n — числовое значение. Для опыта
    • Список 1
    • Список 2
    • Список 3
    • Список 4
    • Список 5
    <стиль>
 ul li:nth-child(2){ цвет:#a94442}
 ul li:nth-child(5){color:#31708f}

 <ул>
     
  • Список 1
    • 
     
  • Список 2
    • 
     
  • Список 3
    • 
     
  • Список 4
    • 
     
  • Список 5
    •
    		3

    :n-й ребенок (нечетный)

    		Нацелен только на нечетный дочерний элемент родительского элемента. n — числовое значение. Для опыта
    • Список 1
    • Список 2
    • Список 3
    • Список 4
    <стиль>
 ul li:nth-child(нечетный){color:#a94442}

 <ул>
     
  • Список 1
    • 
     
  • Список 2
    • 
     
  • Список 3
    • 
     
  • Список 4
    •
    		3

    :n-й ребенок (четный)

    		Цели только даже дочерних элементов родительского элемента, т.е. 2,4,6 и т.д. Для опыта
    • Список 1
    • Список 2
    • Список 3
    • Список 4
    <стиль>
 ul li: nth-child (четный) { color: # a94442}

 <ул>
     
  • Список 1
    • 
     
  • Список 2
    • 
     
  • Список 3
    • 
     
  • Список 4
    •
    		3

    :n-й тип(n)

    		Нацелен только на n-й родственный элемент типа n, начиная с первого. Для опыта
    • Список 1
    • Список 2
    • Список 3
    • Список 4
    • Список 5
    • Список 6
    • Список 7
    <стиль>
 ul li:nth-of-type(3n+1){color:#a94442}

 <ул>
     
  • Список 1
    • 
     
  • Список 2
    • 
     
  • Список 3
    • 
     
  • Список 4
    • 
     
  • Список 5
    • 
     
  • Список 6
    • 
     
  • Список 7
    •
    		3

    :n-последний тип(n)

    		Нацеливается только на n-й братский элемент элемента, начиная с последнего. Для опыта
    • Список 1
    • Список 2
    • Список 3
    • Список 4
    • Список 5
    • Список 6
    • Список 7
    <стиль>
 ul li:nth-last-of-type(3n){color:#a94442}

 <ул>
     
  • Список 1
    • 
     
  • Список 2
    • 
     
  • Список 3
    • 
     
  • Список 4
    • 
     
  • Список 5
    • 
     
  • Список 6
    • 
     
  • Список 7
    •
    		3

    :не()

    нацелен на все элементы, кроме нефункционального.

    • Список 1
    • Список 2
    • Список 3
    • Список 4
    <стиль>
ул ли {цвет: # 31708f}
ul li: not (: nth-child (1)) {
    цвет:#a94442;
}

   
<ул>
    
  • Список 1
    • 
    
  • Список 2
    • 
    
  • Список 3
    • 
    
  • Список 4
    •
    		3

    :пусто

    		Элемент, не имеющий дочернего элемента . Для опыта

    Это пункт с содержанием.

    Еще один пункт с содержанием.

    <стиль>
 p: пусто { граница: сплошная 2 пикселя красная}


    Это пункт с содержанием
    

    

    Еще один абзац с содержанием.
    		3

    :язык()

    		Элемент, имеющий атрибут языка с заданным значением. Для опыта

    Привет друг, как дела?

    Hola amigo, ¿cómo se hase? 

    <стиль>
 :lang(es){ цвет:красный; стиль шрифта: курсив}


    Это пункт с содержанием
    

    Hola amigo, ¿cómo se hase?
    		3

    :дир(л)

    		Элемент, имеющий атрибут dir с заданным конкретным значением, указанным внутри. Для опыта

    Привет друг, как дела?

    ہیلو دوست، آپ کیسے ہیں؟ 

    <стиль>
 :dir(ltr){ цвет:синий;}
 : каталог (rtl) { цвет: красный;}


    Это пункт с содержанием
    

    >ہیلو دوست، آپ کیسے ہیں؟
    		4

    :first-child , :first-letter , :first-line будут поддерживаться в IE 7 и 8. Но селекторы уровня 3 будут поддерживаться только в браузерах IE 9 и выше.

    Псевдоэлементы

    Псевдоэлементы используются с использованием двойных двоеточий, т.е. :: селектор. Как и :before или ::before, оба одинаковы в CSS3. Например, p:first-line или p::first-line.

    Селектор Использовать Уровень CSS

    ::заполнитель

    		Чтобы изменить цвет заполнителя
    :: заполнитель { цвет: светло-голубой}
    		3

    ::выбор

    		Для оформления выделенного текста.

    Выберите этот текст для проверки выбора по умолчанию

    Выберите этот текст для проверки ::selection

    ::выбор{
    фон:#333;
    цвет:#fff;
}
::-moz-выбор{
    фон:#333;
    цвет:#fff;
}
    		3
    • ← Учебник по CSS3
    • CSS-переменные и функции →

    селекторов CSS — Темы масштабирования

    Обзор

    Чтобы стилизовать элементы HTML, нам нужно применить к ним CSS, а чтобы применить любое свойство CSS к любому элементу HTML, нам сначала нужно выбрать этот элемент HTML, а затем применить к нему свойства CSS. Мы достигнем этого с помощью селекторов CSS. Селекторы CSS — это комбинация символов, которая сообщает браузеру, какой элемент HTML выбрать. Селекторы CSS являются частью набора правил CSS. Селекторы CSS используют идентификатор, класс, тип, атрибут и т. д. элемента HTML для их выбора.

    Объем статьи

    • В этой статье вы подробно узнаете о селекторах CSS и с примерами кода
    • Вы узнаете о различных типах селекторов CSS, таких как базовые (универсальные, тип, класс, идентификатор), атрибуты, группировка, комбинаторы и псевдоселекторы (класс и элемент).

    Что такое селектор в CSS?

    Селекторы CSS представляют собой комбинацию символов и специальных символов, которые предписывают браузеру применить определенные свойства CSS к желаемому элементу HTML. Селекторы CSS используют имя идентификатора (начинается с #), имя класса, тип тега HTML (например, заголовок, div и т. д.), атрибут и т. д. элемента HTML для их выбора. HTML-элементы, выбранные селектором, называются предметом селектора.

    Типы селекторов

    Базовые селекторы CSS

    1. Универсальный селектор Самый первый селектор CSS, который мы будем обсуждать, будет универсальным селектором. Он выбирает все HTML-элементы, присутствующие на HTML-странице. Чтобы использовать универсальный селектор, нам нужно использовать звездочки (*) , а затем определите свойство CSS, и после этого будут выбраны все элементы. Элементы HTML внутри других элементов также будут выбраны с помощью универсального селектора CSS. (например, если внутри элемента div есть элемент абзаца, то с помощью универсального селектора CSS также будет выбран элемент para, который находится внутри элемента div)

    Синтаксис

    Пример В этом примере мы будем использовать символ звездочки (*) и определит внутри него набор свойств CSS. Как сказано в определении универсального селектора, определенные свойства CSS будут применяться к каждому элементу HTML. Мы напишем набор свойств CSS и увидим вывод без символа звездочки, а затем, после этого, мы применим символ звездочки и увидим, что каждый элемент на веб-странице (вывод) будет иметь тот же CSS, который мы определили.

    Выход

    2. Селекторы типов

    Селектор типа также известен как селектор элементов, поскольку он выбирает HTML-теги/элементы в вашем документе. Селектор элементов выбирает элементы HTML на основе их имени, некоторые из них: p (тег абзаца), h2 (заголовок 1), div (тег раздела), span и т. д. Чтобы использовать селектор типа, вам просто нужно указать имя тега HTML, а затем в фигурных скобках определить свойства CSS.

    Синтаксис

    Пример В этом примере мы будем использовать разные имена тегов HTML для выбора элемента HTML, а затем применим к ним разные свойства CSS. Для первого набора свойств CSS мы будем использовать элемент

    , а затем мы определим свойства внутри элемента

    . После этого мы выберем элемент

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

    и

    и присвоим им одни и те же свойства CSS.

    Вывод

    3. Селектор классов

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

    Например, если div и h3 имеют один и тот же класс, произнесите «mark». поэтому мы можем получить к ним доступ и применить тот же стиль, используя только имя класса, то есть «отметить». Синтаксис

    Пример В этом примере мы будем использовать два разных класса « с пометкой » и « без пометки », и оба будут содержать разные наборы свойств CSS. Будут использоваться разные элементы HTML, а затем они будут сгруппированы в классы. Теперь для выбора классов мы будем использовать селектор классов CSS. Поскольку первый элемент (para внутри div) принадлежит отмеченному классу, к нему будут применены определенные свойства CSS в отмеченном классе. И точно так же некоторые элементы принадлежат либо к одному из классов, либо ни к одному из них. Поскольку элементы HTML также могут ссылаться на более чем один класс, последний элемент имеет оба класса, чтобы мы могли понять, как объединить два разных класса.

    Вывод

    Теперь предположим, что у вас есть набор свойств CSS, выбранных для имени класса, и вы хотите применить определенное свойство CSS только к определенному элементу HTML в классе. Для этого укажите имя элемента, затем укажите символ точки/точки (.), а затем имя класса.

    Пример Этот пример такой же, как и предыдущий, единственное отличие, из-за которого вывод выглядит иначе, — это тег

    , здесь мы выбрали только элемент

    , который будет иметь класс «отмеченный» или «неотмеченный»

    Выход

    4. ВЫБОР ID Селектор CSS ID использует атрибут ID элемента HTML для выбора элементов на странице и применения к ним свойств CSS. Атрибут id — это уникальный идентификатор в HTML-документе. Чтобы использовать селектор идентификаторов в CSS, используйте хэштег (#), за которым следует имя идентификатора элемента HTML. Элемент HTML будет выбран только в том случае, если его атрибут id точно соответствует значению, указанному в селекторе.

    Синтаксис

    Атрибут ID должен содержать хотя бы один символ и не может начинаться с цифры.

    Пример Здесь, в этом примере, мы использовали разные элементы HTML, такие как

    ,

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

    Элемент, связанный с идентификатором, получит свойства CSS, определенные для этого идентификатора. Для лучшего понимания того, как использовать два разных идентификатора для одних и тех же свойств CSS, мы взяли два идентификатора — id1 и id2. Мы объединили эти два и использовали запятую, чтобы разделить их. Свойства CSS, определенные для них, будут применяться к обоим элементам, использующим идентификатор.

    Вывод

    Если селектор id комбинируется с другим или несколькими селекторами, перед селекторами id должен стоять #.

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

    Селектор CSS [Атрибут] В этом типе селектора атрибутов используется имя элемента, а затем имя атрибута указывается в квадратных скобках. Выбираются элементы, соответствующие названию атрибута, указанного в квадратных скобках, и к ним применяются свойства CSS.

    Синтаксис

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

    Вывод

    Если вы хотите применить определенное свойство CSS к различным элементам, содержащим один и тот же атрибут, в этом случае вы должны указать разные элементы и разделить их запятой (,).

    Пример

    Вывод

    [атрибут = «значение»] Селектор

    CSS В этом типе селектора атрибутов все элементы HTML чей атрибут и значение атрибута (значение атрибута представляет собой строку выбраны символы, которые назначены атрибуту элемента HTML. Он указан в двойных кавычках «») точно соответствует значениям, указанным в селекторе, и применяются указанные свойства CSS.

    Синтаксис

    Пример Здесь, в этом примере, мы использовали два разных HTML-элемента — привязку и тег абзаца

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

    . Теперь любой элемент

    , имеющий целевой атрибут и цель, имеющую значение «abc», будет выбран, и к нему будут применены свойства CSS. Точно так же мы также изменили значение целевого атрибута на «xyz» и элемента на тег привязки , чтобы увидеть другие результаты.

    Вывод

    CSS [атр~=значение] Селектор

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

    Синтаксис

    Пример В этом примере мы будем использовать атрибут title и присвоим ему два разных значения и два разных набора стилей CSS. Теперь мы будем использовать разные элементы HTML, применим эти цели и посмотрим на результат.

    Вывод

    CSS [attr|=value] Value

    Этот селектор атрибутов используется для выбора всех элементов HTML, чей атрибут имеет значение списка слов, разделенных дефисами, элемент будет выбирается, если начало списка слов, разделенных дефисами, в значениях атрибута совпадает со значением, указанным в селекторе. Значение атрибута может быть целым точным словом либо само по себе, либо должно начинаться со значения, за которым сразу следует дефис. (-) 9=) «цветной». Итак, если какой-либо элемент имеет класс, имя которого начинается с «цветной», будет выбран.

    Вывод

    CSS [attribute$=»value»] Selector

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

    Синтаксис

    Пример В этом примере мы выберем целевой атрибут и присвоим ему значение ($=) «конец». Таким образом, если какой-либо элемент имеет целевой атрибут, а значение целевого объекта имеет окончание «конец», то элемент будет выбран, и к нему будут применены стили CSS.

    Вывод

    [атрибут *= «значение»] selector

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

    Синтаксис

    Пример

    Здесь мы будем использовать атрибут target и присвоим ему (*=) значение «line». Таким образом, если какой-либо элемент имеет целевой атрибут, он будет выбран, если его значение содержит слово «строка» в любом месте.

    Выход

    Селектор группировки CSS

    Селектор группировки CSS позволяет выбрать несколько элементов HTML с одинаковыми свойствами CSS и сгруппировать их, чтобы стиль можно было применить сразу ко всем элементам. Это уменьшает избыточность кода и делает его более простым, читаемым и пригодным для повторного использования. Чтобы сгруппировать элементы HTML, во-первых, нам нужно проверить, есть ли элементы с одинаковыми свойствами CSS??, если да!! Затем мы сгруппируем эти элементы и разделим их запятой (,), после чего вы сможете реализовать один и тот же стиль для всех выбранных элементов.

    Синтаксис

    Пример В этом примере мы выберем

    ,

    и применим набор свойств CSS, а затем мы выберем

    ,

    и применим другой набор свойств CSS и посмотрим на результат.

    Вывод

    Комбинаторы CSS

    Селекторы CSS используются для выбора элементов HTML, но когда мы используем сложные селекторы (для выбора элементов HTML используется более одного селектора), то использование комбинаторов объясняет связь между два селектора. Комбинаторы комбинируют селекторы определенным образом, чтобы предоставить им полезную взаимосвязь и положение содержимого в документе.

    В CSS есть четыре типа комбинаторов:

    • Селектор потомков (пробел)
    • Селектор общего уровня (~)
    • Селектор Adjecant Sibling (+)
    • Детский селектор (>)

    1. Селектор потомков (пробел) Селектор потомков в CSS выбирает все элементы HTML, которые являются потомками указанного элемента-предка. Комбинатор потомков представлен одним символом пробела (» «). Он объединяет два селектора, в которых первый селектор представляет предка (родителя, родителя родителя или предка более пяти уровней), а второй селектор представляет потомков. Он объединяет два селектора, так что элементы, соответствующие второму селектору, выбираются, только если у них есть элемент-предок, соответствующий первому селектору. Селектор CSS, использующий комбинатор потомков, называется селекторами потомков.

    Синтаксис

    Пример В этом примере мы создадим

    в качестве элемента parnet, а затем мы сделаем

    в качестве дочернего элемента. Таким образом, если где-либо в коде

    находится под

    , он будет выбран.

    Вывод

    2. Общий селектор родственных элементов

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

    Синтаксис

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

    и

    . Чтобы их можно было выбрать, они должны быть на одном уровне, а

    должен стоять после

    . Если в коде эти два элемента становятся родственными, то

    будет выбран.

    Выход

    3. Селектор соседнего родственного элемента (+)

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

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

    Синтаксис

    Пример В этом примере мы использовали

    и

    , поэтому

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

    .

    Выход

    4. Детский селектор (>) Селектор дочерних элементов выбирает все элементы, которые являются непосредственными дочерними элементами указанного элемента.

    В качестве разделителя между элементами используется знак больше (>) . Родительский элемент всегда должен располагаться слева от «>». Он выбирает только те элементы, которые являются непосредственными дочерними элементами указанного родительского элемента. Если мы удалим символ «больше» (>), обозначающий это как дочерний комбинатор, то он станет селектором-потомком.

    Синтаксис

    Пример В обсуждаемом ниже примере мы использовали

    в качестве родительского элемента и

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

    идет сразу после элемента

    , то

    Вывод

    Псевдоклассы CSS

    Вы когда-нибудь задумывались, как элементы на некоторых веб-страницах меняют свои свойства, когда вы наводите на них курсор мыши?? Или как элемент меняет свое свойство, когда вы нажимаете на них?? Все это возможно благодаря использованию селекторов псевдоклассов CSS. Псевдокласс — это ключевое слово, добавленное к селектору, которое придает особое состояние выбранным элементам, когда они соответствуют желаемому условию. Селектор псевдоклассов CSS помогает добавлять специальные эффекты к элементу HTML на основе особого состояния/состояния элемента. Псевдокласс также можно понимать как помощь, которая сочетается с простыми селекторами для изменения/выделения своего свойства в специальном условии. Например, «:hover» можно использовать для выделения/добавления эффекта к элементу при наведении на него курсора мыши.

    Синтаксис Чтобы использовать псевдокласс, мы должны поставить двоеточие (:) после элемента CSS, к которому мы хотим применить эффекты, а затем указать псевдокласс.

    На веб-сайте используются различные псевдоклассы CSS. Давайте обсудим их один за другим:

    1. Этот псевдокласс добавляет к выбранному элементу специальный эффект, когда вы наводите на него курсор мыши, это может сделать элемент интерактивным.

    Синтаксис

    Пример Здесь, в этом примере, мы сначала выберем элемент

    и применим к нему различные стили CSS. После этого мы будем использовать псевдокласс hover для создания специального эффекта при наведении курсора на элемент.

    Выход

    2. Селектор псевдокласса :first-child используется для нацеливания на указанный первый элемент (потомок) непосредственно внутри любого родительского элемента.

    Синтаксис

    Пример Здесь, в этом примере, элемент

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

    Выход

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

    Синтаксис

    Пример

    Вывод

    Различных селекторов псевдоклассов CSS

    • :dir — используется для выбора элемента на основе его направленности, определяемой языком документа. dir обозначает направленность
    • :lang — используется для выбора элемента на основе определенного значения атрибута lang (язык).
    • :ссылка — используется для отображения еще не посещенных ссылок на веб-странице.
    • :scope — стиль CSS, который будет определен в области действия, будет применяться к каждому элементу внутри родительского элемента.
    • :focus — используется для выбора элементов, которые принимают ввод, когда они находятся в фокусе.
    • :active — используется для представления элемента, который выбирается устройством ввода.
    • :playing — это псевдоселектор состояния ресурса, который используется для представления элемента мультимедиа, который может воспроизводиться, когда этот элемент воспроизводится.
    • :paused — это псевдоселектор состояния ресурса, который используется для представления элемента мультимедиа, который может воспроизводиться, когда этот элемент приостановлен.
    • :checked — когда переключатель или флажок включены, они выбираются с помощью этого селектора.
    • :enabled — помогает показать включенные элементы.
    • :disabled — помогает показать отключенные элементы. Точно так же существует множество селекторов псевдоклассов.

    Селекторы псевдоэлементов

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

    Синтаксис

    Различные псевдоэлементы:

    ::first-line Используется для применения стилей к первой строке текста. Его можно применять только к элементам блочного уровня. Различные свойства, которые можно использовать с ним:

    • свойства шрифта
    • свойства цвета
    • свойства фона
    • межсловный интервал
    • межбуквенный интервал
    • текстовое украшение
    • вертикальное выравнивание
    • преобразование текста
    • высота строки
    • очистить

    Синтаксис

    Пример В этом примере будет выбрана первая строка содержимого внутри тега

    , и к ней будут применены указанные стили CSS.

    Выход

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

    • свойства шрифта
    • свойства цвета
    • свойства фона
    • маржинальные свойства
    • свойства заполнения
    • пограничные свойства
    • текстовое украшение
    • вертикальное выравнивание (только если «плавающее» равно «нет»)
    • преобразование текста
    • высота строки
    • поплавок
    • очистить

    Синтаксис

    Пример В этом примере будет выбрана первая буква содержимого внутри тега

    , и к ней будут применены указанные стили CSS.

    Выход

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

    Синтаксис

    Пример В приведенном ниже примере в качестве элемента выбран

    , а затем содержимое будет вставлено перед содержимым

    .

    Выход

    ::после Он работает аналогично псевдоклассу ::before, но добавляет содержимое после содержимого указанного элемента. Он также использовал свойство content.

    Синтаксис

    Пример В приведенном ниже примере в качестве элемента выбран

    , а затем содержимое будет вставлено после содержимого

    .

    Выход

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

    Синтаксис

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

    Выход

    ::выбор Псевдоэлемент ::selection выбирает (подсвечивает) элементы, когда пользователь выбирает элемент с помощью курсора.

    Синтаксис

    Пример В этом примере мы продемонстрируем псевдоэлемент выбора. Текст, который мы выделим с помощью курсора мыши, примет заданные свойства CSS

    Вывод

    Спецификация

    • Δ означает, что браузеры имеют некоторую поддержку селектора.
    • √ означает текущую поддержку.
    • Χ означает, что браузер не соответствует требованиям.

    Заключение

    • Существуют различные типы селекторов, которые позволяют выбирать различные элементы HTML и различными методами.
      • Селекторы CSS
    • используют идентификатор, класс, тип, атрибут и т. д. элемента HTML для их выбора.
    • Чтобы использовать универсальный селектор, используйте звездочки (*).

      No related posts.

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

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