Расширенные селекторы атрибутов в CSS

Расширенные селекторы атрибутов

С помощью специальных операторов расширенные селекторы атрибутов сравнивают только часть значения атрибута.

Селектор CSS [attribute^="value"]

Когда значение атрибута начинается с заданного значения, [attribute^="value"] выбирает этот элемент.

Пример

Здесь выбирается любой элемент, значение атрибута class которого начинается с «top».

Выберите все элементы со значением атрибута class, начинающимся с «top», используя селектор [class^="top"], и задайте им жёлтый фон. Включите h1 с class «top», абзац с class «top-text» и абзац с class «topcontent», чтобы продемонстрировать совпадение.

> Output: complete HTML page

Prompt

Выберите все элементы со значением атрибута class, начинающимся с «top», используя селектор [class^="top"], и задайте им жёлтый фон. Включите h1 с class «top», абзац с class «top-text» и абзац с class «topcontent», чтобы продемонстрировать совпадение.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS [attribute^="value"] Selector</title>
<style>
[class^="top"] {
  background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute^="value"] Selector</h2>

<h1 class="top">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

</body>
</html>

Селектор CSS [attribute$="value"]

Чтобы вместо этого проверять конец значения, используйте [attribute$="value"]: он выбирает элементы, значение атрибута которых заканчивается заданным значением.

Пример

Здесь выбирается любой элемент, значение атрибута class которого заканчивается на «test».

Выберите все элементы со значением атрибута class, заканчивающимся на «test», используя селектор [class$="test"], и задайте им жёлтый фон. Включите div с class «first_test», div с class «second», div с class «my-test» и абзац с class «mytest», чтобы продемонстрировать совпадение.

> Output: complete HTML page

Prompt

Выберите все элементы со значением атрибута class, заканчивающимся на «test», используя селектор [class$="test"], и задайте им жёлтый фон. Включите div с class «first_test», div с class «second», div с class «my-test» и абзац с class «mytest», чтобы продемонстрировать совпадение.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS [attribute$="value"] Selector</title>
<style>
[class$="test"] {
  background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute$="value"] Selector</h2>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>

Селектор CSS [attribute*="value"]

Для [attribute*="value"] положение совпадения не имеет значения. Элемент выбирается, если значение его атрибута содержит заданное значение в любом месте.

Пример

Здесь выбирается любой элемент, у которого «te» встречается где-либо в значении атрибута class.

Выберите все элементы со значением атрибута class, содержащим «te», используя селектор [class*="te"], и задайте им жёлтый фон. Включите div с class «first_test», div с class «second», div с class «my-test» и абзац с class «mytest», чтобы продемонстрировать совпадение.

> Output: complete HTML page

Prompt

Выберите все элементы со значением атрибута class, содержащим «te», используя селектор [class*="te"], и задайте им жёлтый фон. Включите div с class «first_test», div с class «second», div с class «my-test» и абзац с class «mytest», чтобы продемонстрировать совпадение.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS [attribute*="value"] Selector</title>
<style>
[class*="te"] {
  background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute*="value"] Selector</h2>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>

Стилизация элементов формы с помощью селекторов атрибутов

Элементы формы — удобная цель для селекторов атрибутов, потому что их можно стилизовать в зависимости от типа input.

Пример

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

Стилизуйте элементы input формы с помощью селекторов атрибутов CSS на основе типа input. Используйте input[type="text"], чтобы задать width 150px, padding 6px, margin-bottom 10px и background-color pink. Используйте input[type="button"], чтобы задать width 100px, padding 6px и background-color lightgreen. Включите форму с текстовыми полями для имени и фамилии и кнопкой Submit типа «button».

> Output: complete HTML page

Prompt

Стилизуйте элементы input формы с помощью селекторов атрибутов CSS на основе типа input. Используйте input[type="text"], чтобы задать width 150px, padding 6px, margin-bottom 10px и background-color pink. Используйте input[type="button"], чтобы задать width 100px, padding 6px и background-color lightgreen. Включите форму с текстовыми полями для имени и фамилии и кнопкой Submit типа «button».

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Form Elements With Attribute Selectors</title>
<style>
input[type="text"] {
  width: 150px;
  padding: 6px;
  margin-bottom: 10px;
  background-color: pink;
}

input[type="button"] {
  width: 100px;
  padding: 6px;
  background-color: lightgreen;
}
</style>
</head>
<body>

<h2>Styling Forms with Attribute Selectors</h2>

<form>
  <label for="fname">First Name</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last Name</label><br>
  <input type="text" id="lname" name="lname"><br>
  <input type="button" value="Submit">
</form>

</body>
</html>

Все селекторы атрибутов CSS

[attribute] — Выбирает элемент, у которого есть этот атрибут.
[attribute=value] — Выбирает элемент, у которого атрибут имеет именно это значение.
[attribute~=value] — Выбирает элемент, значение атрибута которого включает это слово.
[attribute|=value] — Выбирает элемент с самим значением или со значением, за которым следует дефис.
[attribute^=value] — Выбирает элемент, значение которого начинается с этого значения.
[attribute$=value] — Выбирает элемент, значение которого заканчивается этим значением.
[attribute*=value] — Выбирает элемент, значение которого включает это значение.