Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

  • Print
  • + Share This
  • 💬 Discuss
This chapter is from the book

Defining Styles Based on Tag Attributes

Although style attributes should all be handled by CSS, many HTML tags still have attributes that define how they behave. For example, the image tag, img, always includes the src attribute to define the source for the image file to be loaded.

Styles can be assigned to an HTML element based on an attribute or an attribute value, allowing you to set styles if the attribute has been set, is or is not a specific value, or contains a specific value (Table 4.6).

Table 4.6. Attribute Selectors

Format

Name

Elements Are Styled If That Element:

ie.jpg

fi.jpg

sa.jpg

go.jpg

op.jpg

[attr]

Attribute

has specified attribute

bullet.jpg

bullet.jpg

bullet.jpg

bullet.jpg

bullet.jpg

[attr="value"]

Exact value

has specified attribute equal to exact value

bullet.jpg

bullet.jpg

bullet.jpg

bullet.jpg

bullet.jpg

[attr~="value"]

Spaced list

has specified attribute equal to exact value within space-separated list

bullet.jpg

bullet.jpg

bullet.jpg

bullet.jpg

bullet.jpg

[attr|="value"]

Hyphenated list

has specified attribute equal to exact value within hyphen-separated list

bullet.jpg

bullet.jpg

bullet.jpg

bullet.jpg

bullet.jpg

[attr^="value"]

Begins with

has specified attribute equal to exact value at beginning

bullet.jpg

bullet.jpg

bullet.jpg

bullet.jpg

bullet.jpg

[attr$="value"]

Ends with

has specified attribute equal to exact value at end

bullet.jpg

bullet.jpg

bullet.jpg

bullet.jpg

bullet.jpg

[attr*="value"]

Contains

has specified attribute equal to exact value anywhere

bullet.jpg

bullet.jpg

bullet.jpg

bullet.jpg

bullet.jpg

To set styles based on an element’s attributes

  1. Set styles if the element has a specific property. To set styles based on the existence of an attribute, type the selector you want to style (HTML, class, or ID), a left bracket ([), the name of the attribute you want to check for, and a right bracket (]) (Code 4.13) red-a.jpg.
    a[title] {...}
    0422a.jpg

    Click to view larger image

    red-a.jpg The general syntax of an attribute selector.

    This will assign the styles you declare only if the tag has this attribute assigned to it regardless of the value.

Code 4.13. HTML tags can have different attributes, and you can add styles to an element based on its attributes red-b.jpg.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Alice&#8217;s Adventures in Wonderland</title>
<style type="text/css" media="all">
   a { display: block; font-size: 2em;}
   a[title] { color: red; }
   a[title="Author"] {color: orange; }
   a[title~="white"] { color: yellow; }
   a[title|="illustrations"] { color: green; }
   a[href^="http://"] {color: blue; }
   a[href*="order"] {color: indigo; }
   a[href$="css3-vqs"] {color: violet; }

</style>
</head>
<body>
<article class="chaptertext">
<h1>About The Book:</h1>
<ul>
   <li><a href="index.html" title="Alice's Adventures in Wonderland">Alice&#8217;s Adventures in Wonderland</a></li>
   <li><a href="index.html" title="Author">Lewis Carroll</a></li>
   <li><a href="index.html" title="illustrations black white">John Tenniel</a></li>
   <li><a href="index.html" title="illustrations-full-color">Arthur Rackham</a></li>
   <li><a href="http://www.jasonspeaking.com">Download Examples</a></li>
   <li><a href="http://www.jasonspeaking.com/css3-vqs/order">More Info</a></li>
   <li><a href="http://www.jasonspeaking.com/css3-vqs">Order The Book</a></li>
</article>
</body>
</html>
0423b.jpg

Click to view larger image

Image The results of Code 4.13. This shows how styles are applied to elements based on their properties.

  1. Set styles if a string exactly matches the property’s value. To set styles based on an attribute’s exact value, type the selector you want to style (HTML, class, or ID), a left bracket ([), the name of the attribute you want to check for, an equals sign (=), the value you are testing for in quotes ('...'), and a right bracket (]). The value is case sensitive.
    a[title='home'] {...}

    This will assign the styles you declare only if the tag has this attribute assigned to it with the exact assigned value.

  2. Set styles if a string is in a space-separated list of values. To set styles based on an attribute’s value that is within a list of space-separated values (for example, a particular word in a sentence), type the selector you want to style (HTML, class, or ID), a left bracket ([), the name of the attribute you want to check for, a tilde (~), an equals sign (=), the value you are testing for in quotes ('...'), and a right bracket (]).
    a[title~="email"] {...}

    This will assign the styles you declare only if the tag has the attribute assigned to it with a value that contains the string as part of a space-separated list. Generally, this means that it is a word in a sentence. Partial words do not count. So in this example, testing for 'mail' would not work.

  3. Sets the style if the string is in a hyphenated list of values assigned to the property. To set styles based on an attribute’s value being the first in a list separated by hyphens, type the selector you want to style (HTML, class, or ID), a left bracket ([), the name of the attribute you want to check for, a bar (|), an equals sign (=), the value you are testing for in quotes ('...'), and a right bracket (]).
    a[title|="resume"]

    This will assign the styles you declare only if the tag has this attribute assigned to it with a value that contains the string at the beginning of a hyphen-separated list. Generally, this is used for styling languages as an alternative to using the language pseudo-class.

  4. red-star.jpgSet styles if a string is the value’s prefix. To set styles based on the value at the beginning of an attribute, type the selector you want to style (HTML, class, or ID), a left bracket ([), the name of the attribute you want to check for, a carat (^), an equals sign (=), the value you are testing for in quotes ('...'), and a right bracket (]).
    a[href^="http://"]

    This will assign the styles you declare only if the value string occurs exactly as it is in the quotes at the beginning of the attribute value.

  5. red-star.jpgSet styles if a string is the property value’s suffix. To set styles based on an attribute’s value being the first in a hyphen-separated list, type the selector you want to style (HTML, class, or ID), a left bracket ([), the name of the attribute you want to check for, a dollar sign ($), an equals sign (=), the value you are testing for in quotes ('...'), and a right bracket (]).
    a[href$=".info"]

    This will assign the styles you declare only if the value occurs at the end of the attribute’s value.

  6. Set styles if a string is anywhere in the property value. To set styles based on an attribute’s value being the first in a hyphen-separated list, type the selector you want to style (HTML, class, or ID), a left bracket ([), the name of the attribute you want to check for, an asterisk (*), an equals sign (=), the value you are testing for in quotes ('...'), and a right bracket (]).
    a[href*="speakinginstyles"]

    This will assign the styles you declare if the value occurs anywhere in the attribute’s value.

    Values are case sensitive. In other words, “Alice” and “alice” are two different values.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus