This chapter is from the book
This chapter is from the book
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: |
|
|
|
|
|
|
[attr] |
Attribute |
has specified attribute |
|
|
|
|
|
|
[attr="value"] |
Exact value |
has specified attribute equal to exact value |
|
|
|
|
|
|
[attr~="value"] |
Spaced list |
has specified attribute equal to exact value within space-separated list |
|
|
|
|
|
|
[attr|="value"] |
Hyphenated list |
has specified attribute equal to exact value within hyphen-separated list |
|
|
|
|
|
|
[attr^="value"] |
Begins with |
has specified attribute equal to exact value at beginning |
|
|
|
|
|
|
[attr$="value"] |
Ends with |
has specified attribute equal to exact value at end |
|
|
|
|
|
|
[attr*="value"] |
Contains |
has specified attribute equal to exact value anywhere |
|
|
|
|
|
To set styles based on an element’s attributes
- 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)
.
a[title] {...}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 
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Alice’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’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>
)
The results of Code 4.13. This shows how styles are applied to elements based on their properties.
- 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.
- 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.
- 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.
Set 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.
- Set 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.
- 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.