- The Element Family Tree
- Defining Styles Based on Context
- Working with Pseudo-classes
- Working with Pseudo-elements
- Defining Styles Based on Tag Attributes
- NEW IN CSS3: Querying the Media
- Inheriting Properties from a Parent
- Making a Declaration !important
- Determining the Cascade Order
- Putting It All Together
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: |
Compatibility |
|
[attr] |
Attribute |
has specified attribute |
IE7, FF1.5, O5, S2, CSS2 |
|
[attr=“value”] |
Exact value |
has specified attribute equal to exact value |
IE7, FF1.5, O5, S2, CSS2 |
|
[attr~=“value”] |
Spaced List |
has specified attribute equal to exact value within space-separated list |
IE7, FF1.5, O5, S2, CSS2 |
|
[attr|=“value”] |
Hyphenated List |
has specified attribute equal to exact value within hyphen-separated list |
IE7, FF1.5, O5, S2, CSS2 |
|
[attr^=“value”] |
Begins with |
has specified attribute equal to exact value at beginning |
CSS3 |
|
[attr$=“value”] |
Ends With |
has specified attribute equal to exact value at end |
CSS3 |
|
[attr*=“value”] |
Contains |
has specified attribute equal to exact value anywhere |
CSS3 |
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] {...}Code 4.13. HTML tags can have different attributes, and you can add styles to an element based on its attributes
.
<!-- HTML5 --> <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Alice's Adventures in Wonderland</title> <style type="text/css" media="all">
a[title] { display: block; color: rgb(0,0,0);font-size: .8em; }a[title="Home"] {color: rgb(51,0,0);font-size: 1em;}a[title~="email"] { color:rgb(102,0,0);font-size: 1.2em; }a[title|="resume"] { color: rgb(153,0,0);font-size: 1.4em;}a[href^="http://"] {color: rgb(204,0,0); vfont-size: 1.6em;}a[href$=".info"] {color: rgb(235,0,0);font-size: 1.8em;}a[href*="speakinginstyles"] {color: rgb(255,0,0); font-size: 2em;}</style> </head> <body> <navigation> <h2>About the Author</h2> <a href="" title="Portfolio">Portfolio</a> <a href="index.html" title="Home">Home Page</a> <a href="" title="contact email link">Email</a> <a href="" title="resume-link">Résumé</a> <a href="http://www.jasonspeaking.com" title="blog">JasonSpeaking</a> <a href="http://www.fluidwebtype.info" title="book">Fluid Web Typography</a> <a href="http://www.speakinginstyles.com" title="book">Speaking In Styles</a> </navigation> </body> </html>This will assign the styles you declare only if the tag has this attribute assigned to it regardless of the value.
- 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.
- NEW IN CSS3
: 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.
- NEW IN CSS3 : 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.
)
)