Руководство CSS Attribute Selector

CSS Attribute Selector
CSS [Attribute] Selector
CSS [Attribute='value'] Selector
CSS [Attribute~='value'] Selector
CSS [Attribute|='value'] Selector
CSS [Attribute^='value'] Selector
CSS [Attribute$='value'] Selector
CSS [Attribute*='value'] Selector

1. CSS Attribute Selector

CSS Attribute Selector помогает вам выбрать элементы, основываясь на значении выданного атрибута.

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

Руководство Основные CSS Selectors

2. CSS [Attribute] Selector

CSS [Attribute] Selector помогает вам найти элементы с указанными атрибутами (attribute) и независимо от значения данного атрибута.

Например, найти все элементы <a> с атрибутом target (независимо от значения данного атрибута).

attr-selector-example1.css

a[target] {
   background-color: yellow;
}

attr-selector-example1.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS [Attribute] Selector</title>
      <link rel="stylesheet" type="text/css" href="attr-selector-example1.css" />
   </head>
   <body>
     <h3>CSS [Attribute] Selector</h3>
     <ul>
         <li><a href="#" target="_blank">HTML Tutorial</a></li>
         <li><a href="#" target="_self">CSS Tutorial</a></li>
         <li><a href="#">Other Tutorial</a></li>
     </ul>
   </body>
</html>

3. CSS [Attribute='value'] Selector

CSS [Attribute='value'] Selector используется для поиска элементов, у которых значения полностью совпадают с выданными значениями. Данный Selector "Не различает прописные и строчные буквы" (Case-insensitive).

Например, найти элементы <a> со значением атрибута Target"_blank". Не различая прописные и строчные буквы (Case-insensitive).

[target="_blank"]
Target	OK?
_blank
_Blank
_BLANK
_Self

attr-selector-example13.css

a[target="_blank"] {
   background-color: yellow;
}

attr-selector-example13.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS [Attribute="value"] Selector</title>
      <link rel="stylesheet" type="text/css" href="attr-selector-example13.css" />
   </head>
   <body>
     <h3>CSS [Attribute="value"] Selector</h3>
     <p>a[target="_blank"]</p>
     <ul>
         <li><a href="#" target="_blank">HTML Tutorial</a></li>
         <li><a href="#" target="_BLANK">Javascript Tutorial</a></li>
         <li><a href="#" target="_self">CSS Tutorial</a></li>
         <li><a href="#">Other Tutorial</a></li>
     </ul>
     <p><b>Note:</b> For [<i>attribute</i>=<i>value</i>]
       to work in IE8 and earlier, a DOCTYPE must be declared.</p>
   </body>
</html>

4. CSS [Attribute~='value'] Selector

CSS [Attribute~='value'] Selector используется для поиска элементов, у которых значение атрибута содержит указанное слово. Данный Selector "различает прописные и строчные буквы" (Case-sensitive).

Например, найти все элементы <img> с атрибутом title содержащим слово "cat". Примечание: Слово "cats" в данном случае не подходит, так как "cat" и "cats" являются двумя разными словами.

[title~="cat"]
title	OK?
Cute baby cats
A Black cat
A Black Cat
A Black cat(2)
A Black cat-3
A White Cat
Tiger (Belong to the cat family)

attr-selector-example3.css

img[title~="cat"] {
   border: 2px solid green;
   padding:3px;
}
img {
  margin: 5px;
}

attr-selector-example3.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS [Attribute~="value"] Selector</title>
      <link rel="stylesheet" type="text/css" href="attr-selector-example3.css" />
   </head>
   <body>
     <h3>CSS [Attribute~="value"] Selector</h3>
     <p>img[title~="cat"]</p>
     <img src="pic-cat1.png" title="Cute baby cats"/>
     <img src="pic-cat2.png" title="A Black cat"/>
     <img src="pic-tiger1.png" title="Tiger (Belong to the cat family)"/> 
     <img src="pic-deer1.png" title="A deer stands intently" />
   </body>
</html>

Если вы хотите, чтобы CSS [Attribute~="value"] Selector "не различал строчные и прописные буквы" (Case-insensitive), вы можете использовать синтаксис CSS4:

/** Syntax: */
[Attribute~="value" i]

/** Example: */
img[title~="cat" i] {
   border: 2px solid green;
   padding:3px;
}

<img src="pic-cat1.png" title="Cute baby cats"/>

<img src="pic-cat2.png" title="A Black Cat"/> <!-- OK -->

<img src="pic-tiger1.png" title="Tiger (Belong to the cat family)"/> <!-- OK -->

<img src="pic-deer1.png" title="A deer stands intently" />

5. CSS [Attribute|='value'] Selector

CSS [Attribute|='value'] Selector используется для поиска элементов, у которых значение атрибута полностью подходит выданному значению, или начинается с выданного значения и после сразу идет знак минус ( - ). Данный Selector "различает прописные и строчные буквы" (Case-sensitive).

Например, найти элементы, у которых значения атрибута Class является "top" или начинается с "top-".

[class\|="top"]
class	OK?
top
Top
top-text
top-content
left-text top-text

attr-selector-example5.css

*[class|="top"] {
   border: 2px solid green;
   padding:3px;
}

attr-selector-example5.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS [Attribute|="value"] Selector</title>
      <link rel="stylesheet" type="text/css" href="attr-selector-example5.css" />
   </head>
   <body>
     <h3>CSS [Attribute|="value"] Selector</h3>
     <p>*[class|="top"]</p>
     <h1 class="top">CSS Tutorial</h1>
     <p class="top-text">CSS Selector Tutorial</p>
     <p class="topcontent">....</p>
     <p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>]
       to work in IE8 and earlier, a DOCTYPE must be declared.</p>
   </body>
</html>

Если вы хотите, чтобы CSS [Attribute|="value"] Selector "не различал прописные и строчные буквы" (Case-insensitive), вы можете использовать синтаксис CSS4:

/** Syntax: */
[Attribute|="value" i]

/** Example: */
img[class|="top" i] {
   border: 2px solid green;
   padding:3px;
}

<h1 class="top">CSS Tutorial</h1>  <!-- OK -->
<h1 class="Top">CSS Tutorial</h1>  <!-- OK -->

<p class="top-text">CSS Selector Tutorial</p>  <!-- OK -->
<p class="TOP-text">CSS Selector Tutorial</p>  <!-- OK -->
<p class="topcontent">....</p>

6. CSS [Attribute^='value'] Selector

CSS [Attribute^="value"] Selector используется для поска элементов, у которых значение атрибута начинается в выданного значения. Данный Selector "различает прописные и строчные буквы" (Case-sensitive).

Например, найти элементы, у которых значения атрибута Class начинается с "top".

[class^="top"]
class	OK?
top
Top
top-text
top-content
topcontent
left-text top-text

attr-selector-example7.css

*[class^="top"] {
   border: 2px solid green;
   padding:3px;
}

attr-selector-example7.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS [Attribute^="value"] Selector</title>
      <link rel="stylesheet" type="text/css" href="attr-selector-example7.css" />
   </head>
   <body>
     <h3>CSS [Attribute^="value"] Selector</h3>
     <p>*[class^="top"]</p>
      <h1 class="top">CSS Tutorial</h1>
      <p class="top-text">CSS Selector Tutorial</p>
      <p class="topcontent">....</p>
     <p><b>Note:</b> For [<i>attribute</i>^=<i>value</i>]
       to work in IE8 and earlier, a DOCTYPE must be declared.</p>
   </body>
</html>

Если вы хотите, чтобы CSS [Attribute^="value"] Selector "не различал прописные и строчные буквы" (Case-insensitive), вы можете использовать синтаксис CSS4:

/** Syntax: */
[Attribute^="value" i]

/** Example: */
img[class^="top" i] {
   border: 2px solid green;
   padding:3px;
}

<h1 class="top">CSS Tutorial</h1>  <!-- OK -->
<h1 class="Top">CSS Tutorial</h1>  <!-- OK -->

<p class="top-text">CSS Selector Tutorial</p>  <!-- OK -->
<p class="TOP-text">CSS Selector Tutorial</p>  <!-- OK -->

<p class="topcontent">....</p> <!-- OK -->
<p class="footer top">....</p>

7. CSS [Attribute$='value'] Selector

CSS [Attribute$="value"] Selector используетя для поиска элементов, у которых значения атрибута заканчиваются выданным значением. Данный Selector "различает прописные и строчные буквы" (Case-sensitive).

Например, найти элементы <a> у которых значение атрибута HREF заканчивается на ".html".

[href^=".html"]
href	OK?
http://abc.com/java-tutorial.html
http://abc.com/java-tutorial.Html
http://abc.com/java-tutorial.html#chapter1
http://cde.com/css.jsp

attr-selector-example9.css

a[href$=".html"] {
   color: red;
   font-weight: bold;
}

attr-selector-example9.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS [Attribute$="value"] Selector</title>
      <link rel="stylesheet" type="text/css" href="attr-selector-example9.css" />
   </head>
   <body>
     <h3>CSS [Attribute$="value"] Selector</h3>
     <p>a[href$=".html"]</p>
      <ul>
          <li><a href="http://abc.com/java-tutorial.html">Java Tutorial</a></li>
          <li><a href="http://abc.com/java-tutorial.html#chapter1">Java Chapter 1</a></li>
          <li><a href="http://cde.com/css.jsp">CSS Tutorial</a></li>
          <li><a href="http://other.com/tutorial">Other Tutorial</a></li>
      </ul>
     <p><b>Note:</b> For [<i>attribute</i>$=<i>value</i>]
       to work in IE8 and earlier, a DOCTYPE must be declared.</p>
   </body>
</html>

Если вы хотите, чтобы CSS [Attribute$="value"] Selector "не различал прописные и строчные буквы" (Case-insensitive), вы можете использовать синтаксис CSS4:

/** Syntax: */
[Attribute$="value" i]

/** Example: */
img[href$="html" i] {
    color:red;
    font-weight: bold;
}

<ul>
      <li><a href="http://abc.com/java-tutorial.html">Java Tutorial</a></li> <!-- OK -->
      <li><a href="http://abc.com/java-tutorial.Html">Java Tutorial</a></li> <!-- OK -->
      <li><a href="http://abc.com/java-tutorial.html#chapter1">Java Chapter 1</a></li>
      <li><a href="http://cde.com/css.jsp">CSS Tutorial</a></li>
       <li><a href="http://other.com/tutorial">Other Tutorial</a></li>
</ul>

8. CSS [Attribute*='value'] Selector

CSS [Attribute*="value"] Selector используется для поиска элементов, у которых значение атрибута содержит выданное значение. Данный Selector "различает прописные и строчные буквы" (Case-sensitive).

Например, найти все элементы <a> с атрибутом HREF содержащим ".html".

*[href=".html"]**
href	OK?
http://abc.com/java-tutorial.html
http://abc.com/java-tutorial.Html
http://abc.com/java-tutorial.html#chapter1
http://cde.com/css.jsp

attr-selector-example11.css

a[href*=".html"] {
   color: red;
   font-weight: bold;
}

attr-selector-example11.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS [Attribute*="value"] Selector</title>
      <link rel="stylesheet" type="text/css" href="attr-selector-example11.css" />
   </head>
   <body>
     <h3>CSS [Attribute*="value"] Selector</h3>
     <p>a[href*=".html"]</p>
      <ul>
          <li><a href="http://abc.com/java-tutorial.html">Java Tutorial</a></li>
          <li><a href="http://abc.com/java-tutorial.html#chapter1">Java Chapter 1</a></li>
          <li><a href="http://cde.com/css.jsp">CSS Tutorial</a></li>
          <li><a href="http://other.com/tutorial">Other Tutorial</a></li>
      </ul>
     <p><b>Note:</b> For [<i>attribute</i>*=<i>value</i>]
       to work in IE8 and earlier, a DOCTYPE must be declared.</p>
   </body>
</html>

Если вы хотите, чтобы CSS [Attribute*="value"] Selector "не различал прописные и строчные буквы" (Case-insensitive), вы можете использовать синтаксис CSS4:

/** Syntax: */
[Attribute*="value" i]

/** Example: */
img[href*="html" i] {
    color:red;
    font-weight: bold;
}

<ul>
      <li><a href="http://abc.com/java-tutorial.html">Java Tutorial</a></li> <!-- OK -->
      <li><a href="http://abc.com/java-tutorial.Html">Java Tutorial</a></li> <!-- OK -->
      <li><a href="http://abc.com/java-tutorial.html#chapter1">Java Chapter 1</a></li>
      <li><a href="http://cde.com/css.jsp">CSS Tutorial</a></li>
       <li><a href="http://other.com/tutorial">Other Tutorial</a></li>
</ul>

No ADS