Селекторы тегов | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
3.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Версии CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Описание
В качестве селектора может выступать любой элемент HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и др.
Синтаксис
E { Описание правил стиля }
Здесь E имя произвольного элемента. Следует понимать, что хотя правила стиля можно применить к любому элементу, результат будет заметен только для тегов, которые непосредственно отображаются в контейнере <body>.
Пример
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы тегов</title>
<style>
p {
text-align: justify; /* Выравнивание по ширине */
color: green; /* Зелёный цвет текста */
}
</style>
</head>
<body>
<p>Более эффективным способом ловли льва в пустыне
является метод золотого сечения. При его использовании пустыня делится
на две неравные части, размер которых подчиняется правилу золотого
сечения.</p>
</body>
</html>
В данном примере изменяется цвет текста и выравнивание текста параграфа. Стиль будет применяться только к тексту, который располагается внутри контейнера <p> (рис. 1).
Рис. 1. Применение стиля к селектору p
CSS-селекторы — Веб-технологии для разработчиков
Селектор определяет, к какому элементу применять то или иное CSS-правило.
Обратите внимание — не существует селекторов, которые бы позволили выбрать родителя (содержащий контейнер) или соседа родителя или потомков соседа родителя.
Базовые селекторы
- Универсальный селектор
- Выбирает все элементы. По желанию, он может быть ограничен определенным пространством имен или относиться ко всему пространству имён.
Синтаксис:*
ns|*
*|*
Пример:*
будет соответствовать всем элементам на странице.
- Селекторы по типу элемента
- Этот базовый селектор выбирает тип элементов, к которым будет применяться правило.
Синтаксис:элемент
Пример: селекторinput
выберет все элементы<input>
. - Селекторы по классу
- Этот базовый селектор выбирает элементы, основываясь на значении их атрибута
.
Синтаксис:.имяКласса
Пример: селектор.index
выберет все элементы с соответствующим классом (который был определен в атрибутеclass="index"
). - Селекторы по идентификатору
- Этот базовый селектор выбирает элементы, основываясь на значении их
id
атрибута. Не забывайте, что идентификатор должен быть уникальным, т. е. использоваться только для одного элемента в HTML-документе.
Синтаксис:#имяИдентификатора
Пример: селектор#toc
выберет элемент с идентификатором toc (который был определен в атрибутеid="toc"
). - Селекторы по атрибуту
- Этот селектор выбирает все элементы, имеющие данный атрибут или атрибут с определённым значением.
Синтаксис:[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
Пример: селектор[autoplay]
выберет все элементы, у которых есть атрибутautoplay
(независимо от его значения).
Ещё пример: a[href$=».jpg»] выберет все ссылки, у которых адрес заканчивается на «.jpg».
Ещё пример: a[href^=»https»] выберет все ссылки, у которых адрес начинается на «https».
Комбинаторы
- Комбинатор запятая
- Комбинатор
,
это способ группировки, он выбирает все совпадающие узлы.
Синтаксис:A, B
Пример:div, span
выберет оба элемента — и<div>
и<span>
. - Комбинатор потомков
- Комбинатор
' '
(пробел) выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).
Синтаксис:A B
Пример: селекторdiv span
выберет все элементы<span>
, которые находятся внутри элемента<div>
. - Дочерние селекторы
- Комбинатор
'>'
в отличие от пробела выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу.
Синтаксис:A > B
Пример: селекторul > li
выберет только дочерние элементы<li>
, которые находятся внутри, на первом уровне вложенности по отношению к элементу<ul>
. - Комбинатор всех соседних элементов
- Комбинатор
'~'
выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем.
Синтаксис:A ~ B
Пример:p ~ span
выберет все элементы<span>
, которые находятся после элемента<p>
внутри одного родителя. - Комбинатор следующего соседнего элемента
- Комбинатор
'+'
выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.
Синтаксис:A + B
Пример: селекторul + li
выберет любой<li>
элемент, который находится непосредственно после элемента<ul>
.
Псевдо
- Псевдоклассы
- Знак
:
позволяет выбрать элементы, основываясь на информации, которой нет в дереве элементов.
Пример:a:visited
соответствует всем элементам<a>
которые имеют статус «посещённые».
Ещё пример:div:hover
соответствует элементу, над которым проходит указатель мыши.
Ещё пример:input:focus
соответствует полю ввода, которое получило фокус. - Псевдоэлементы
- Знак
::
позволяет выбрать вещи, которых нет в HTML.
Пример:p::first-line
соответствует первой линии абзаца<p>
.
Версии CSS
Спецификация | Статус | Комментарии |
---|---|---|
Selectors Level 4 | Рабочий черновик | Добавление комбинатора колонок || , селекторов структуры сеточной разметки (CSS grid selector), логических комбинаторов, местоположения, временных, состояния ресурсов, лингвистических и UI псевдоклассов, модификаторов для ASCII регистрозависимых и регистронезависимых атрибутов со значениями и без них. |
Selectors Level 3 | Рекомендация | Добавлен комбинатор ~ и древовидные структурные псевдоклассы.Сделаны псевдоэлементы, использующие префик :: двойное двоеточие. Селекторы дополнительных атрибутов. |
CSS Level 2 (Revision 1) | Рекомендация | Добавлен комбинатор потомков > и комбинатор следующего соседа + .Добавлен универсальный (*) комбинатор и селектор атрибутов. |
CSS Level 1 | Рекомендация | Первоначальное определение. |
См. также
CSS специфичность
Данную тему мы уже раскрывали на вебинаре, который проводил наш преподаватель, но решили дополнить чуть текстом (да и многим, как оказалось, так удобнее). В общем представляем статью на тему «Селекторы CSS», которую Павел Попов прорабатывал в рамках нашего курса «Автоматизация в тестировании».
Поехали.
Каждый курс или статья для начинающих автоматизаторов рассказывает об удобном и универсальном средстве поиска элементов Web-страницы, как XPath. Данный вид локаторов на элемент был создан в 1999 году для указания на элементы в XML файлах. С помощью встроенных функций XPath стал очень популярным инструментом поиска элементов на Web-странице. Если HTML код вашего приложения выглядит как-то так:
…
<form class=“form_upload>
<div>
<div class=“row_element_3 row tile_fixed”>
<div class=“button_cell wrapper_tile”>
<button type=“submit” class=“button_submit wrapper_button”>Нажми меня</button>
</div>
</div>
</div>
</form>
…
и вы не можете найти достойный XPath для кнопки “Нажми меня”, не стоит сразу бежать в сторону разработчика с просьбой о помощи. Есть отличная возможность воспользоваться CSS селектором, он будет выглядеть так:
.button_submit
Добро пожаловать в мир CSS.
Принято считать, что в CSS селекторах все завязано на классы. Это не совсем так, но если Web приложение использует “оптимизатор” или “обфускатор” HTML кода, и выглядит вот так:
<form class=“afhfsdh__”>
<div>
<div class=“hfgeyq fjjs qurlzn”>
<div class=“fjdfmzn fjafjd”>
<button type=“submit” class=“ajffalf wjf_fjaap”></button>
</div>
</div>
</div>
</form>
…
(все названия css классов уменьшены с помощью оптимизатора)
, то получить короткий CSS селектор не удастся — как правило, после каждого нового билда css классы меняются на новые. Но все равно, CSS селектор может оказаться проще и в этом случае: css: form button[type=‘submit’]
, вместо XPath: //form//button[@type=‘submit’]
Допустим, что оптимизаторы HTML у нас не установлены и разработчики не планируют его использовать на проекте (проверьте этот факт!).
Как вы могли уже догадаться, символ. используется вместо слова class и будет искать вхождение данного класса в любом элементе, в независимости от количества классов у этого элемента.
Смотрите:
<form class=“form_upload> <div> <div class=“row_element_3 row tile_fixed”> <div class=“button_cell wrapper_tile”> <button type=“submit” class=“button_submit wrapper_button”></button> </div> </div> </div> </form>
css для элемента button: .button_submit
, при этом класс .wrapper_button
указывать необязательно, но если он нужен для указания на наш класс, мы можем его добавить сразу после указания первого css класса: css: .button_submit.wrapper_button
. Порядок классов роли не играет, поэтому их можно поменять местами:
.wrapper_button.button_submit .
Следующим незаменимым помощником в поиске HTML элементов являются Теги. Написать css селектор, указывающий на тег button очень просто, тем более, что он уже был написан в этом предложении. CSS селектор для button –
css: button.
И ничего больше указывать вам не требуется, если ваша цель — это привязка к тегу. Совмещая теги и классы получаем::
button.button_submit
и это также является css селектором к нашему элементу.
Помимо тегов, атрибуты также помогают уникально идентифицировать элемент на странице. Часто разработчики создают дополнительные атрибуты вместо добавления новых “айдишников”, например, могут создавать дополнительные атрибуты data-id или auto-id у каждого элемента, с которым планируется дальнейшее действие. К примеру, разработчики могут добавить атрибут data-id
к нашей кнопке button. Тогда к атрибутам с помощью css селектора можно обратиться через фигурные скобки: [data-id=‘submit’]
. Дополнительно, вы можете не указывать значение атрибута после знака равно [data-id]
. Такой селектор найдет вам все элементы, у которого существует атрибут data-id
с любым значением внутри. Вы также можете указать атрибут class для поиска нашей кнопки:
, но в CSS, как вы уже знаете, можно полениться и написать так: .button_submit
. Соединять все вместе также достаточно просто:
button[type=‘submit’].button_submit
тег атрибут класс
Но это большая удача, если нам удается находить элемент, используя селектор с указанием только одного элемента, как, например, использовать атрибут [data-id] который однозначно находит один элемент на странице. Очень часто нам приходится использовать предков элемента, чтобы найти потомка. И это в CSS тоже возможно сделать достаточно просто:
<form class=“form_upload>
<div>
<div class=“row_element_3 row tile_fixed”>
<div class=“button_cell wrapper_tile”>
<button type=“submit” class=“button_submit wrapper_button”></button>
</div>
</div>
</div>
</form>
css:form > div > div > div > button.button_submit
и знак
>
позволяет найти элемент исключительно у предка внутри. Но писать все элементы ненужно, так как в CSS есть возможность поиска во всех потомках, этот символ — пробел “ “
. Используя данный указатель мы можем быстро найти элемент внутри формы:Было: css: form > div > div > div > button.button_submit
Стало: css: form button,button_submit
Удобно также находить следующего “родственника” через предыдущего. Дополним наш пример еще одним span
:
<form class=“form_upload> <div> <div class=“row_element_3 row tile_fixed”> <div class=“button_cell wrapper_tile”> <div class=“content”></div> <span data-id=“link”>Ссылка</span> <!-- элемент с атрибутом data-id --> <button type=“submit” class=“button_submit wrapper_button”> <!-- искомая кнопка --></button> </div> </div> </div> </form>
[data-id=‘link’] + button
найдет button
, у которого выше на один уровень есть родственник с атрибутом data-id=”link”
. Этим указателем можно пользоваться, когда у предыдущего элемента есть id или уникальный атрибут, а у элемента, который находится следующим после нужного, таких идентификаторов нет. Итак, с помощью символа + css селектор найдет следующего родственника.NOTE:
div + span[data-id=‘link’] + button
Дополнительно вы можете собирать “паровозик” из следующих элементов с использованием указателя +, но не советую это делать из-за возможного изменения местонахождения элементов.
Не стоит упускать вариант поиска по части атрибута. Делается это просто: button[class*=‘submit’]
— из длинного названия класса button_submit
мы берем только правую часть submit
и добавляем к знаку = символ *. Также можно найти по слову cell
из значения класса: div[class*=‘cell’]
.
Есть еще одна особенность css селекторов, которая позволит найти вам все ссылки или расширения файлов, это ^=
и $=
, но такая задача стоит не так часто, как поиск по вхождению значения у атрибута.
a[href^=“https:”]
— найдет все ссылки, которые начинаются с https,
a[href$=“.pdf”]
— найдет все ссылки, которые заканчиваются на .pdf.
Немного о том, как найти потомков с одним и тем же тегом у предка. Начнем, как всегда, с примера:
<div class=“tiles”>
<div class=“tile”>…</div>
<div class=“tile”>…</div>
</div>
Как найти второй
div class=“tile”
у div class=“tiles”
? Варианта два:div > div:nth-of-type(2) div > div:nth-child(2)
Но в чем различие между этими двумя селекторами? Дополним пример:
<div class=“tiles”>
<a class=“link”>…</a> <!—1—>
<div class=“tile”>…</div><!—2—>
<div class=“tile”>…</div><!—3—>
</div>
css 1 вариант:
div > div:nth-of-type(2)
css 2 вариант:
div > div:nth-child(2)
Теперь эти селекторы ведут на два разных элемента. Прежде чем идти далее, попробуйте догадаться, какой селектор ведет на какой элемент?
Разгадка:
первый селектор будет указывать на строчку номер 2, тогда как второй селектор будет указывать на строчку номер 3. nth-child
ищет второй div
, который является потомком родителя . Второй
<div>у элемента
<div class=“tiles”>это третья строка. В свою очередь
nth-of-type
ищет второй элемент у родителя<div class=“tiles”>, который должен являться тегом
div, это строка номер два.
Есть правило, которое позволяет упростить работу с селекторами в ситуации, когда вам нужно найти конкретный элемент: использовать nth-of-type
везде, где это возможно. Если вы разобрались с примером выше, рекомендую вам всегда обращать внимание на количество одинаковых элементов у предка, используя nth-child
, и тогда вам будет неважно, куда поместят ссылку
<a>: наверху, между
<div>или внизу блока, всегда селектор
div:nth-child(2)
будет все равно указывать на нужный элемент – второй элемент div внутри блока.Была опущена еще одна функция поиска элемента по id. Вы уже знаете, что поиск по любому из атрибутов осуществляется с использованием указания квадратных скобок [attribute=“value”]
и для нашего случая мы можем найти элемент так [id=“value”]
. А что если есть существует более быстрый способ поиска по id элемента?
#value. “#” - указатель, что поиск осуществляется по id.
Используя все приобретенные навыки попробуйте написать селектор для кнопки
<button>
Отправить
…
<div>
<div class=“tile_wrapper tile content”>
<div class=“row row_content”>
<div class=“outline description__on”></div>
<div class=“outline description__off button_send hover_mouse”>
<button class=“outline button_send”>Отправить</button>
</div>
</div>
</div>
</div>
Будем рады увидеть ваши комментарии и варианты в комментариях тут или обсудить это на очередном открытом уроке, который пройдёт у нас 13-го марта.
Спасибо!
CSS Селекторы
CSS Селекторы
Селекторы CSS используются для того, чтобы «найти» (или выбрать) HTML элементы, которым вы хотите задать стиль.
Можно разделить CSS селекторы на пять категорий:
На этой странице будут объяснены самые основные CSS селекторы.
CSS Селектор элементов
Селектор элементов выбирает HTML элементы на основе имени элемента.
Пример
Здесь все элементы <p> на странице будут выравниваненны по центру, с красным цветом текста:
p
{
text-align: center;
color: red;
}
CSS Селектор идентификаторов
Селектор id использует атрибут идентификатора HTML элемента для выбора конкретного элемента.
Идентификатор элемента является уникальным в пределах страницы, поэтому селектор id используется для выбора одного уникального элемента!
Чтобы выбрать элемент с определенным идентификатором, напишите символ хэша (#), за которым следует идентификатор элемента.
Пример
Приведенное ниже правило CSS будет применено к элементу HTML с помощью:
#para1
{
text-align: center;
color: red;
}
Примечание: Имя идентификатора не может начинаться с цифры!
CSS Селектор класса
Селектор классов выбирает HTML элементы с определенным атрибутом класса.
Чтобы выбрать элементы с определенным классом, поставить символ точку (.), за которым следует имя класса.
Пример
В этом примере все HTML-элементы с будут красными и выровненными по центру:
.center {
text-align: center;
color: red;
}
Можно также указать, что класс должен влиять только на определенные элементы HTML.
Пример
В этом примере только элементы <p> с будут выровнены по центру:
p.center {
text-align: center;
color: red;
}
HTML элементы также могут ссылаться на несколько классов.
Пример
В этом примере элемент <p> будет стилизован в соответствии с и с:
<p>Этот пункт относится к двум классам.</p>
Посмотреть код »Примечание: Имя класса не может начинаться с цифры!
CSS Селектор универсальный
Универсальный селектор (*) выбирает все HTML элементы на странице.
Пример
Приведенное ниже правило CSS влияет на каждый элемент HTML на странице:
*
{
text-align: center;
color: blue;
}
CSS Селектор группирования
Селектор группирования выбирает все 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;
}
Проверьте себя с помощью упражнений!
Все CSS простые селекторы
Селектор | Пример | Описание |
---|---|---|
.class | .intro | Выбирает все элементы с |
#id | #firstname | Выбирает элемент с |
* | * | Выбирает все элементы |
element | p | Выбирает все элементы <p> |
element,element,.. | div, p | Выбирает все элементы <div> и <p> |
select | Chrome Полная поддержка Да
| Edge Полная поддержка 12 | Firefox Полная поддержка 1
| IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да
| WebView Android Полная поддержка Да
| Chrome Android Полная поддержка Да
| Firefox Android Полная поддержка 4
| Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да
| Samsung Internet Android Полная поддержка Да
|
---|---|---|---|---|---|---|---|---|---|---|---|---|
autofocus | Chrome Полная поддержка Да | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
disabled | Chrome Полная поддержка Да | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
form | Chrome Полная поддержка Да | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
multiple | Chrome Полная поддержка Да | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
name | Chrome Полная поддержка Да | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
required | Chrome Полная поддержка Да | Edge Полная поддержка 12 | Firefox Полная поддержка 4 | IE Полная поддержка 10 | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
size | Chrome Полная поддержка Да | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
Обзор
Селекторы атрибутов отбирают элементы по наличию атрибута или его значению.
[attr]
- Обозначает элемент с атрибутом по имени attr.
[attr=value]
- Обозначает элемент с именем атрибута attr и значением в точности сопадающим с value.
[attr~=value]
- Обозначает элемент с именем атрибута attr значением которого является набор слов разделенных пробелами, одно из которых в точности равно value
[attr|=value]
- Обозначает элемент с именем атрибута attr. Его значение при этом может быть или в точности равно «value» или может начинаться с «value» со сразу же следующим «-» (U+002D). Это может быть использовано когда язык описывается с подкодом.
[attr^=value]
- Обозначает элемент с именем атрибута attr значение которого начинается с «value»
[attr$=value]
- Обозначает элемент с именем атрибута attr чье значение заканчивается на «value»
[attr*=value]
- Обозначает элемент с именем атрибута attr чье значение содержит по крайней мере одно вхождение строки «value» как подстроки.
Пример
/* Все span с атрибутом "lang" будут жирными */ span[lang] {font-weight:bold;} /* Все span в Португалии будут зелеными */ span[lang="pt"] {color:green;} /* Все span с американским английским будут синими */ span[lang~="en-us"] {color: blue;} /* Любые span на китайском языке будут красными, как на упрощенном китайском (zh-CN) так и на традиционном (zh-TW) */ span[lang|="zh"] {color: red;} /* Все внутренние ссылки будут иметь золотой фон */ a[href^="#"] {background-color:gold} /* Все ссылки с url заканчивающимся на .cn будут красными */ a[href$=".cn"] {color: red;} /* Все ссылки содержащие "example" в url будут иметь серый фон */ a[href*="example"] {background-color: #CCCCCC;}
<div> <a href="http://example.com">English:</a> <span lang="en-us en-gb en-au en-nz">Hello World!</span> </div> <div> <a href="#portuguese">Portuguese:</a> <span lang="pt">Olá Mundo!</span> </div> <div> <a href="http://example.cn">Chinese (Simplified):</a> <span lang="zh-CN">世界您好!</span> </div> <div> <a href="http://example.cn">Chinese (Traditional):</a> <span lang="zh-TW">世界您好!</span> </div>
Спецификации
Совместимость с браузерами
Функциональность | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Базовая поддержка | (Да) | 1.0 (1.7 или ранее) | 7 | 9 | 3 |
Функциональность | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Базовая поддержка | ? | ? | 1.0 (1) | ? | ? | ? |
См. также
CSS селекторов
CSS селекторов
CSS-селекторы используются для «поиска» (или выбора) HTML-элементов, которые вы хочу стиль.
Мы можем разделить селекторы CSS на пять категорий:
На этой странице будут описаны самые основные CSS-селекторы.
CSS-элемент Selector
Селектор элементов выбирает элементы HTML на основе имени элемента.
Пример
Здесь все элементы
на странице будут по центру, с красным цветом текста:
п
{
выравнивание текста: по центру;
красный цвет;
}
Селектор идентификатора CSS
Селектор идентификатора использует атрибут id элемента HTML для выбора определенного элемента.
Идентификатор элемента является уникальным на странице, поэтому селектор идентификатора привык к выберите один уникальный элемент!
Чтобы выбрать элемент с определенным идентификатором, введите символ хеша (#), а затем идентификатор элемента.
Пример
Правило CSS ниже будет применено к элементу HTML с:
# para1
{
выравнивание текста: по центру;
красный цвет;
}
Примечание: Идентификационное имя не может начинаться с цифры!
Селектор класса CSS
Селектор класса выбирает элементы HTML с определенным атрибутом класса.
Чтобы выбрать элементы с определенным классом, введите символ точки (.), А затем имя класса
Пример
В этом примере все элементы HTML с красным цветом и по центру:
.center {
выравнивание текста: центр;
цвет: красный;
}
Также можно указать, что класс должен затрагивать только определенные элементы HTML.
Пример
В этом примере только
элементы будут выровнены по центру:
п.центр {
выравнивание текста: центр;
цвет: красный;
}
элементов HTML также может относиться к более чем одному классу.
Пример
В этом примере элемент
будет стилизован в соответствии с и до:
Этот абзац относится к двум классам.
Попробуй сам »Примечание: Имя класса не может начинаться с цифры!
Универсальный селектор CSS
Универсальный селектор (*) выделяет весь HTML элементы на странице.
Пример
Приведенное ниже правило CSS будет влиять на каждый элемент HTML на странице:
*
{
выравнивание текста: по центру;
цвет синий;
}
Селектор группировки CSS
Селектор группировки выбирает все элементы HTML в одном стиле определения.
Посмотрите на следующий код CSS (элементы h2, h3 и p имеют одинаковые определения стиля):
h2 {выравнивание текста: по центру;
цвет: красный;
}
ч3
{
выравнивание текста: по центру;
цвет: красный;
}
р
{
выравнивание текста: по центру;
цвет: красный;
}
Будет лучше сгруппировать селекторы, чтобы минимизировать код.
Для группировки селекторов разделяйте каждый селектор запятой.
Пример
В этом примере мы сгруппировали селекторы из кода выше:
h2, h3, p
{
выравнивание текста: по центру;
цвет: красный;
}
Проверь себя упражнениями!
Все простые CSS селекторы
Селектор | Пример | Пример описания |
---|---|---|
класс | .intro | Выбирает все элементы с |
# id | # имя | Выбирает элемент с |
* | * | Выбирает все элементы |
элемент | р | Выбирает все элементы |
элемент, элемент ,., | div, p | Выбирает все элементы и все элементы |
,
Селектор | Пример | Пример описания |
---|---|---|
класс | .intro | Выбирает все элементы с |
.class1.class2 | .name1.name2 | Выбирает все элементы с name1 и name2 set в своем классе атрибута |
.class1 .class2 | .name1 .name2 | Выбирает все элементы с name2 , который является потомком элемент с именем 1 |
# id | # имя | Выбирает элемент с |
* | * | Выбирает все элементы |
элемент | р | Выбирает все элементы |
элемент.класс | p.intro | Выбирает все элементы с |
, элемент | дел, р | Выбирает все элементы и все элементы |
элемент элемент | div p | Выбирает все элементы внутри элементов |
элемент > элемент | div> p | Выбирает все элементы , где родительский элемент является элементом |
элемент + элемент | div + p | Выбирает все элементы , которые размещаются сразу после элементов |
элемент1 ~ элемент2 | р ~ ул | Выбирает каждый элемент
|
[ атрибут ] | [цель] | Выбирает все элементы с целевым атрибутом |
[атрибут = значение ] | [target = _blank] | Выбирает все элементы с target = «_ blank» |
[ атрибут ~ = значение ] | [название ~ = цветок] | Выбирает все элементы с атрибутом заголовка, содержащим слово «цветок» |
[ атрибут | = значение ] | [lang | = ru] | Выбирает все элементы со значением атрибута lang, начинающимся с «en» |
[атрибут = значение ] | a [href ^ = «https»] | Выбирает каждый элемент , значение атрибута href которого начинается с «https» |
[ атрибут $ = значение ] | a [href $ = «.pdf «] | Выбирает каждый элемент , значение атрибута href которого заканчивается на «.pdf» |
[ атрибут * = значение ] | a [href * = «w3schools»] | Выбирает каждый элемент , значение атрибута href которого содержит подстроку «w3schools» |
: активный | а: активный | Выбирает активную ссылку |
:: после | р :: после | Вставьте что-нибудь после содержимого каждого элемента |
:: до | р :: до | Вставьте что-нибудь перед содержимым каждого элемента |
: проверено | вход: проверено | Выбирает каждый отмеченный элемент |
: по умолчанию | вход: по умолчанию | Выбирает элемент по умолчанию |
: отключено | вход: отключен | Выбирает каждый отключенный элемент |
: пусто | р: пусто | Выбирает каждый элемент , который не имеет дочерних элементов (включая текстовые узлы) |
: включено | вход: включен | Выбирает каждый включенный элемент |
: первый ребенок | р: первый ребенок | Выбирает каждый элемент , который является первым дочерним элементом его родителя |
:: первая буква | р :: первая буква | Выбирает первую букву каждого элемента |
:: первая линия | р :: первая линия | Выбирает первую строку каждого элемента |
: первый тип | р: первый тип | Выбирает каждый элемент , который является первым элементом его родителя |
: фокус | вход: фокус | Выбирает элемент ввода, который имеет фокус |
: зависание | а: зависание | Выбирает ссылки на мышь над |
: в диапазоне | вход: в диапазоне | Выбирает элементы ввода со значением в указанном диапазоне |
: неопределенный | вход: неопределенный | Выбирает элементы ввода, которые находятся в неопределенном состоянии |
: недействительно | ввод: недействительный | Выбирает все входные элементы с недопустимым значением |
: язык (, язык ), | p: lang (it) | Выбирает каждый элемент с атрибутом lang, равным «it» (итальянский) |
: последний ребенок | р: последний ребенок | Выбирает каждый элемент , который является последним дочерним элементом его родителя |
: последний тип | р: последний тип | Выбирает каждый элемент , который является последним элементом его родителя |
: ссылка | а: ссылка | Выбирает все не посещенные ссылки |
: нет ( селектор ) | : нет (р) | Выбирает каждый элемент, который не является элементом |
: n-й ребенок ( n ) | р: nth-child (2) | Выбирает каждый элемент , который является вторым дочерним элементом его родителя |
: nth-last-child ( n ) | р: nth-last-child (2) | Выбирает каждый элемент , являющийся вторым дочерним элементом своего родителя, считая от последнего дочернего элемента |
: nth-last-of-type ( n ) | p: nth-last-of-type (2) | Выбирает каждый элемент , который является вторым элементом его родителя, начиная с последнего дочернего элемента |
: nth-of-type ( n ) | p: nth-of-type (2) | Выбирает каждый элемент , который является вторым элементом его родителя |
: единственный в своем роде | р: единственный в своем роде | Выбирает каждый элемент , который является единственным элементом своего родителя |
: единственный ребенок | р: только ребенок | Выбирает каждый элемент , который является единственным потомком своего родителя |
: опционально | вход: опционально | Выбирает элементы ввода без атрибута «обязательный» |
: вне диапазона | вход: вне диапазона | Выбирает элементы ввода со значением за пределами указанного диапазона |
:: заполнитель | вход :: заполнитель | Выбирает элементы ввода с указанным атрибутом placeholder |
: только для чтения | вход: только для чтения | Выбирает элементы ввода с указанным атрибутом «только для чтения» |
: чтение-запись | вход: чтение-запись | Выбирает элементы ввода с атрибутом «только для чтения», НЕ указан |
: требуется | вход: требуется | Выбирает элементы ввода с указанным атрибутом «required» |
: корень | : корень | Выбирает корневой элемент документа |
:: выбор | :: выбор | Выбирает часть элемента, которая выбрана пользователем |
: цель | # новости: цель | Выбирает текущий активный элемент #news (нажал на URL, содержащий это имя якоря) |
: действительный | ввод: действительный | Выбирает все входные элементы с допустимым значением |
: посетил | : посетил | Выбирает все посещенные ссылки |
HTML выберите тег
Пример
Создайте раскрывающийся список с четырьмя опциями:
Выберите автомобиль: <выберите
name = "cars">
Ниже приведены примеры «Попробуйте сами».
Определение и использование
Элемент
используется для создания раскрывающегося списка.
Элемент
чаще всего используется в форме для сбора пользовательского ввода.
Атрибут name
необходим для ссылки
данные формы после отправки формы (если вы опустите атрибут name
, данные из раскрывающегося списка не будут отправлены).
Атрибут id
необходим для связи
выпадающий список с меткой.
Теги
Совет: Всегда добавляйте тег
Поддержка браузера
Элемент | |||||
---|---|---|---|---|---|
<выбрать> | Да | Да | Да | Да | Да |
атрибутов
Атрибут | Значение | Описание |
---|---|---|
автофокус | автофокус | Указывает, что раскрывающийся список должен автоматически получать фокус при загрузке страницы |
инвалидов | инвалидов | Указывает, что раскрывающийся список должен быть отключен |
форма | form_id | Определяет, какой форме выпадающий список принадлежит |
кратный | кратный | Указывает, что одновременно можно выбрать несколько вариантов |
имя | имя | Определяет имя для выпадающего списка |
требуется | требуется | Указывает, что пользователь должен выбрать значение перед отправкой формы |
размер | номер | Определяет количество видимых опций в раскрывающемся списке |
глобальных атрибутов
Тег
Атрибуты события
Тег
Дополнительные примеры
Пример
Используйте
Попробуй сам »
Связанные страницы
HTML DOM ссылка: Выбрать объект
Руководство по CSS: стилизация форм
Настройки CSS по умолчанию
Нет.
,
CSS атрибутов выбора
HTML-элементы стиля
с конкретными атрибутами
Возможно стилизовать элементы HTML, которые имеют определенные атрибуты или значения атрибутов.
CSS [атрибут] Селектор
Селектор [атрибут]
используется для выбора элементов с указанным
атрибут.
В следующем примере выбираются все элементы с целевым атрибутом:
CSS [attribute = «value»] Селектор
Селектор [attribute = "value"]
используется для выбора элементов с указанным
атрибут и значение.
В следующем примере выбираются все элементы с атрибутом target = «_ blank»:
CSS [attribute ~ = «value»] Селектор
Селектор [attribute ~ = "value"]
используется для выбора элементов с атрибутом
значение, содержащее указанное слово.
В следующем примере выбираются все элементы с атрибутом title, который содержит разделенный пробелами список слов, одним из которых является «цветок»:
Приведенный выше пример будет соответствовать элементам с title = «flower», title = «summer flower «, и title =» flower new «, но не title =» my-flower «или title =» flowers «.
CSS [attribute | = «value»] Селектор
Селектор [attribute | = "value"]
используется для выбора элементов с указанным атрибутом, начиная с указанного значения.
В следующем примере выбираются все элементы со значением атрибута класса, которое начинается с «top»:
Примечание: Значение должно быть целым словом, либо одно, как class = «top» или за ним следует дефис (-), например!
CSS [attribute ^ = «value»] Селектор
Селектор [attribute ^ = "value"]
используется для выбора элементов, атрибут которых
значение начинается с указанного значения.
В следующем примере выбираются все элементы со значением атрибута класса, которое начинается с «top»:
Примечание: Значение не должно быть целым словом!
CSS [attribute $ = «value»] Селектор
Селектор [attribute $ = "value"]
используется для выбора элементов, атрибут которых
значение заканчивается указанным значением.
В следующем примере выбираются все элементы со значением атрибута класса, которое заканчивается «тестом»:
Примечание: Значение не должно быть целым словом!
CSS [attribute * = «value»] Селектор
Селектор [attribute * = "value"]
используется для выбора элементов, атрибут которых
значение содержит указанное значение.
В следующем примере выбираются все элементы со значением атрибута класса, которое содержит «те»:
Примечание: Значение не должно быть целым словом!
Формы для укладки волос
Селекторы атрибутов могут быть полезны для оформления форм без класса или идентификатора:
Пример
входной [тип = «текст»] {ширина: 150 пикселей;
дисплей: блок;
нижнее поле: 10 пикселей;
цвет фона: желтый;
}
вход [type = «button»]
{
ширина: 120 пикселей;
поле слева: 35 пикселей;
дисплей: блок;
}
Подсказка: Посетите наш учебник по CSS-формам, чтобы получить дополнительные примеры того, как стилизовать формы с помощью CSS.
Проверь себя упражнениями!
Все селекторы атрибутов CSS
Селектор | Пример | Пример описания |
---|---|---|
[ атрибут ] | [цель] | Выбирает все элементы с целевым атрибутом |
[ атрибут = значение ] | [target = _blank] | Выбирает все элементы с target = «_ blank» |
[ атрибут ~ = значение ] | [title ~ = flower] | Выбирает все элементы с атрибутом заголовка, содержащим слово «цветок» |
[ атрибут | = значение ] | [lang | = en] | Выбирает все элементы со значением атрибута lang, начинающимся с «en». |
[ атрибут ^ = значение ] | a [href ^ = «https»] | Выбирает каждый элемент , значение атрибута href которого начинается с «https» |
[ атрибут $ = значение ] | a [href $ = «.pdf «] | Выбирает каждый элемент , значение атрибута href которого заканчивается на «.pdf» |
[ атрибут * = значение ] | a [href * = «w3schools»] | Выбирает каждый элемент , значение атрибута href которого содержит подстроку «w3schools» |
,