Attribute selectors

To change the style of the elements containing different parameters, the selector attributes were brought into CSS. They allow to set the style of the tag as for the existence of the particular parameter or its meaning.

Note

The attribute selectors are supported by Internet Explorer browser from the version 7.0, though it is necessary to add the correct <!DOCTYPE> for the correct example processing.

Let’s examine some common variants of the use of such selectors.

Simple attribute selector

Defines the style for the element, if the specific attribute is determined. Its value is not important in this case. Syntax of the use of such selector:

<em>[attribute] { Description of the style rules } Selector[attribute] { Description of the style rules }</em>

A blank between the name of selector and square brackets is not allowed.
In the example 12.1 the changing of the style of the tag <Q> is shown in case the title parameter is added to it.

Example 12.1. The overall view of the element, it depends on its parameter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Attribute selectors</title>
  <style type="text/css">
   Q {
    font-style: italic; /* Italic type */
    quotes: "\00AB" "\00BB"; /* Change the overall view of quotation marks in the quote */
   }
   Q[title] {
    color: maroon; /* Colour of the text */
   }
  </style>
 </head>
 <body>
  <p>Continuing the famous Merphy's low, which says:<q> If the trouble can happen, it will obviously happen</q>, we can do our own observation: 
  <q title="For the laws by Pherguson-Merzhevich">After the web-page will be correctly displaced in one browser, it will be clear that it is shown in the other browser incorrectly</q>.</p>
 </body>
</html>

The result of the example is shown in the figure 12.1


Figure 12.1. Changing of the style of the element depending on the use of title parameter.

Attribute selector with the value

Defines the style of the element in case the certain value of specific parameter is determined. Syntax:

[attribute="value"] { Description of the style rules } Selector[attribute="value"] { Description of the style rules }<pre/></dd>
<br>
In the first case the style is applied to all the elements, which contain the indicated value of the attribute. And in the second one it is applied only to certain selectors. 
In the example 12.2 changing of the style of the link is shown in case the tag &lt;A&gt; contain parameter target="_blank". The link will open in a new window and in order to show it, add the small image before the text of the link with the help of styles. 
<br>
Example 12.2. The style for opening the links in a new window. 
<pre lang="css4strict"line="1"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Attribute selectors</title>
  <style type="text/css">
   A[target="_blank"] { 
    background: url(blank.gif) no-repeat 0 2px; /*Background image parameters */
    padding-left: 15px; /* Depose the text to the left */
   }
  </style>
 </head>
 <body>
  <p><a href="link1.html">Common link</a> | 
     <a href="link2" target="_blank">The link in the new window</a></p>
 </body>
</html>

The result of the example is shown below (figure 12.2):



Figure 12.2. Changing the style of the element depending on the value of target parameter.


In this parameter the image is added to the link with the help of attribute background.

Attribute begins with the certain value

Defines the style for the element in case the attribute begins with the indicated value. Syntax:

[attribute^="value"] { Description of the style rules } Selector[attribute^="value"] { Description of the style rules }

In the first case the style is applied to all the elements, which contain the indicated value of the attribute. And in the second one it is applied only to certain selectors.
Imagine that it is required to separate the style of common and external reference – the links, which follow the other sites. Let’s use attribute selectors. External links begin with the key word http:// and you should add it to selector A, as it is shown in the example 12.3.

Example 12.3. Changing the style of external reference.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Attribute selectors</title>
  <style type="text/css">
   A[href^="http://"] { 
    font-weight: bold; /* Heavy faced type */
   }
  </style>
 </head>
 <body>
  <p><a href="link1.html">Common link</a> | 
  <a href="http://htmlbook.ru" target="_blank">External reference to the site htmlbook.ru</a></p>
 </body>
</html>

The result of the example is shown below:



Figure 12.3. Changing the style for external references.

The attribute is ended with a particular value

Defines the style of the element in case the attribute is ended with indicated value. Syntax:

[attribute$="value"] { Description of the style rules } Selector[attribute$="value"] { Description of the style rules }

In the first case the style is applied to all the elements, which are ended with indicated value of the attribute. And in the second one it is applied only to certain selectors.

Example 12.4. The style for different domains.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   A[href$=".ru"] { /* If the link is ended in .ru */ 
    background: url(ru.gif) no-repeat; /* Backgroung image parameters */
    padding-left: 10px; /* Move the text to the right */ 
   }
   A[href$=".com"] { /* If the link is ended in .com */ 
    background: url(com.gif) no-repeat;
    padding-left: 10px;
   }
  </style>
 </head>
 <body>
  <p><a href="http://www.yandex.com">Yandex.Com</a> | 
  <a href="http://www.yandex.ru">Yandex.Ru</a></p>
 </body>
</html>

There are two links in this example, which follow different domains – com and ru. The background image is added to each of such links with the help of styles. The style attributes will be added only to those links, href parameter of which ends with “.ru” or “.com”.

The value can be found in any place of the attribute.

There are variants, when the style should be applied to the selector with certain attribute, the part of which is some value. Syntax:

[attri*="значение"] { Описание правил стиля } Селектор[атрибут*="значение"] { Описание правил стиля }

The example can be located in any place of the argument, for example, in the beginning, in the end or somewhere in the middle. The main thing is that this is its part. So, in the example 12.5 the change of the link style is shown.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Selector attributes</title>
  <style type="text/css">
   [href*="htmlbook"] { 
    background: yellow; /* Yellow color of the background */
   }
  </style>
 </head>
 <body>
  <p><a href="http://www.htmlbook.ru/html/">Tags HTML</a> | 
  <a href="http://stepbystep.htmlbook.ru">Step by step</a> | 
  <a href="http://webimg.ru">Graphics for the Web</a></p>
 </body>
</html>

The picture 12.4 shows the result of the given example.


Fig. 12.4. The change of the style for the links, in the address the «htmlbook» is met