Селектор атрибутов CSS - httpdoc.ru

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

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

CSS [атрибут] Селектор

[attribute] Селектор выбирает элемент , который использует указанный sttribute.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Attribute Selector </title> 
  <meta charset="UTF-8"> 
<style>
  [title] {
    color:green;
   }
</style>
</head>
<body>
  <h1 title="heading">Attribute Selector</h1>
  <p title="paragraph">The color of this paragraph will be red.</p>
</body>
</html>

Выход

CSS Attribute Selector

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

Идентификатор этого абзаца будет красным.


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

= Оператор используется для выбора элемента, матчи с заданным значением , значение атрибута:

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Value Attribute Selector </title> 
  <meta charset="UTF-8"> 
<style>
  input[type="text"] {
   border:1px solid green;
   }
  input[type="submit"] {
   border:1px solid green;
  }
</style>
</head>

<body>
 <form action="https://coderepublics.com">
  <input type="text">
  <input type="submit" value="Submit">
 </form>
</body>
</html>

Выход

CSS Value Attribute Selector

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

~= Оператор используется , чтобы выбрать элемент, значение атрибута список по разделенных пробелами значений, совпадает с заданным значением. Это означает, что если для атрибута указано более одного значения, тогда CSS будет применен к тем элементам, где любое значение соответствует заданному значению.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Value Attribute Selector </title> 
  <meta charset="UTF-8">
<style>
 [class~="warning"] {
  color: #fff;
  background: #2984a9;
  padding:10px;
  }
</style>
</head>
<body>
  <p class="warning">The style will apply to this paragraph.</p>
  <p class="warning success">The style will also apply to this paragraph.</p>
  <p class="Success">The style will not apply to this paragraph.</p>
</body>
</html>

Выход

CSS Value Attribute Selector

Стиль будет применен к этому абзацу.

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

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


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

^= Оператор используются для выбора какого - либо элемента , значение атрибута которого начинается с заданным значением. Это не обязательно должно быть целое слово, это могут быть только начальные символы слова.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Value Attribute Selector </title> 
  <meta charset="UTF-8">
<style>
a[href^="https://"] {
    background-color: green;
    padding: 12px 15px 12px 15px;
    border-radius: 5px;
    margin: 10px;
    color: white;
    font-size: 18px;
    text-decoration: underline;
}
</style>
</head>
<body>
 <p><a href="https://coderepublics.com" target="_blank">CodeRepublics</a></p>
</body>
</html>

Выход

CSS Value Attribute Selector

CodeRepublics


CSS [атрибут | = "значение"] Селектор

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

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Value Attribute Selector </title> 
  <meta charset="UTF-8">
<style>
 p[lang|=en] {
  color: #fff;
  padding:10px;
  background: gray;
  }
</style>
</head>
<body>
  <p lang="en">The style will apply to this paragraph.</p>
  <p lang="en-us">The style will also apply to this paragraph.</p>
  <p lang="us">The style will not apply to this paragraph.</p>
</body>
</html>

Выход

CSS Value Attribute Selector

Стиль будет применен к этому абзацу.

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

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


CSS [атрибут * = "значение"] Селектор

*= Оператор используется , чтобы выбрать элемент , значение атрибута которого содержит заданное значение. Он выбирает все элементы со значением атрибута класса, равным заданному значению. Это не обязательно должно быть целое слово.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Value Attribute Selector </title> 
  <meta charset="UTF-8">
<style>
  [class*="warning"] {
   color: #fff;
   padding:10px;
   background: seagreen;
  }
</style>
</head>
<body>
 <p class="warning">The style will apply to this paragraph.</p>
 <p class="warning">The style will also apply to this paragraph.</p>
 <p class="warning">The style will also apply to this paragraph.</p>
 <p class="warning">The style will also apply to this paragraph.</p>
 <p>The style will not apply to this paragraph.</p>
</body>
</html>

Выход

CSS Value Attribute Selector

Стиль будет применен к этому абзацу.

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

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

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

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


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

$= Оператор выбирает элементы , значение атрибута которого концы с заданным значением. Это не обязательно должно быть целое слово.

Пример
<!DOCTYPE html>
<html>
<head>
<title>CSS Attribute selector</title>
<style>
 a[href$=".pdf"] {
  padding:10px 10px 10px 10px;
  background-color:pink;
  border-radius:10px;
	}
</style>
</head>
<body>
  <p><a href="../tryit/Google.pdf">Download PDF</a></p>
</body>
</html>

Выход

Example of attribute selector

Скачать PDF