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

View more Tutorials:

1- CSS Attribute Selector

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

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 16x16
_Blank 16x16
_BLANK 16x16
_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 16x16
A Black Cat  
A Black cat(2)  
A Black cat-3  
A White Cat  
Tiger (Belong to the cat family) 16x16
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 16x16
Top  
top-text 16x16
top-content 16x16
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 16x16
Top  
top-text 16x16
top-content 16x16
topcontent 16x16
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 16x16
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 16x16
http://abc.com/java-tutorial.Html  
http://abc.com/java-tutorial.html#chapter1 16x16
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>

View more Tutorials: