html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Intermediate

Lesson 2 - Attribute Selectors

In lesson 4 of the CSS Basic Tutorials we looked at some basic tag selectors (universal, tag, class and id). In lessons 3 and 4 of the CSS 1/2 Intermediate Tutorials we looked at advanced tag selectors and pseudo selectors, respectively. In this lesson we take a final look at selectors by looking at attribute selectors and how we can use them to select and style our HTML.

So What Are Attribute Selectors?

Attribute selectors allow us to use matching to select the HTML tags required. Matching comes in four varieties:

  1. Attribute Match - This is where we match by an attribute of the HTML tag regardless of content value.
  2. Exact Value Match - The value contained within the attribute exactly matches the value entered.
  3. Contains Value Match - The value of the attribute contains the value entered.
  4. Subcode Match - Allows subcode matching that will match the value entered or that value with a hyphen and a subcode. For example en, EN-GB or en-us.

Lets see some examples of attribute selectors and the impact on the tags we are overriding, so we can get a feel for what they do.

Open up the file with Notepad we created and tested in Lesson 1: Generated Content.

You saved the file to your computer in the C:\_CSSAdvanced folder as lesson_1_csspage.html

Copy and paste the following code into the reopened file, overwriting the existing text.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for Attribute Selectors follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Doctor Advanced CSS - Lesson 2 - Attribute Selectors</title>

<style type="text/css">
/* Attribute Match - Matches all images that have a title attribute */
img[title] {
  background-color: olive;
  padding: 10px;
  border: solid 3px aqua;
}
/* Exact Value Match - Images with alt attribute that matches value specified */
img[alt="Chicken Dish"] {
  background-color: yellow;
  padding: 10px;
  border: solid 3px red;
}
/* Contains Value Match - Images with alt attribute that contain value specified */
img[alt~="Piee"] {
  background-color: orange;
  padding: 10px;
  border: solid 2px blue;
}
/* Subcode Match - Paragraphs with a lang attribute and "en" subcode */
p[lang|="en"] {
  color: red;
}
/* Subcode Match - Paragraphs with a lang attribute and "fr" subcode */
p[lang|="fr"] {
  color: blue;
}
</style>

</head>
<body>
<h1>Attribute Selectors</h1>
<h2>Attribute and Contains Value Matches</h2>
<div>
<img src="http://htmldoctor.info/images/beefalepiesmall.jpg"
    alt="Beef and Ale Pie" title="Beef and Ale Pie" />
<img src="http://htmldoctor.info/images/beefalepiesmall.jpg"
    alt="Beef and Ale Piee" />
<img src="http://htmldoctor.info/images/beefalepiesmall.jpg"
    alt="Beef and Ale Pie" title="Beef and Ale Pie" />
<h2>Exact Value and Contains Value Matches</h2>
<img src="http://htmldoctor.info/images/chickenpiesmall.jpg"
    alt="Chicken Dish" />
<img src="http://htmldoctor.info/images/chickenpiesmall.jpg"
    alt="Chicken Piee" />
<img src="http://htmldoctor.info/images/chickenpiesmall.jpg"
    alt="Chicken Piee" />
</div>
<p>A paragraph with no lang attribute.</p>
<p lang="en">A paragraph with a lang attribute and en subcode.</p>
<p lang="nl">A paragraph with a lang attribute and nl subcode.</p>
<p lang="en-us">A paragraph with a lang attribute and en-us subcode.</p>
<p>A paragraph with no lang attribute.</p>
<p lang="fr">A paragraph with a lang attribute and fr subcode.</p>
<p lang="en-us">A paragraph with a lang attribute and en-gb subcode.</p>
<p>A paragraph with no lang attribute.</p>
</body>
</html>

Save the file in the C:\_CSSAdvanced folder as lesson_2_csspage.html and close the Notepad.

notepad

Viewing Our Saved File

From the C:\_CSSAdvanced folder, double click on the saved file and it will appear in your default web browser and look something like the following image.

notepad

Reviewing The Code

The blue text below matches the first comment for each style above, so you can see what is applied and where.

/* Attribute Match - Matches all images that have a title attribute */
In the first set of images shown in the screenshot above the first and third images both have a title attribute and so the style is applied to them.

/* Exact Value Match - Images with an alt attribute that matches the value specified */
In the second set of images shown in the screenshot above, the first image has an attribute with a matching value alt="Chicken Dish" and so the style is applied to it.

/* Contains Value Match - Images with alt attribute that contains value specified */
Look at the second image in the first row of images and the second and third images in the second row of images. As you can see these 3 images all have a blue border on an orange background. All three of these images have an alt attribute that contains the value "Piee" and so are styled as specified for the contains value match.

/* Subcode Match - Paragraphs with a lang attribute and "en" subcode */
As you can see from the screenshot any paragraph with the lang attribute and any derivative of the "en" subcode is coloured red.

/* Subcode Match - Paragraphs with a lang attribute and "fr" subcode */
Viewing the screenshot you can see any paragraph with the lang attribute and any derivative of the "fr" subcode is coloured blue.

Lesson 2 Complete

Attribute selectors are extremely powerful and with correct use you can transform attributes thoughout your site with little CSS. Experiment with the styles above and see what results you get. Change some values and attributes and check the results. Getting to grips with selectors is key to really understanding how and why things happen when you utilize CSS.

Related Tutorials

CSS Basic Tutorials - Lesson 4 - Basic Tag Selectors

CSS 1/2 Intermediate Tutorials - Lesson 3 - Advanced Tag Selectors

CSS 1/2 Intermediate Tutorials - Lesson 4 - Pseudo Selectors

What's Next?

We look at jazzing up our lists with some nifty CSS properties.



Generated Content  << Prev          Next >>  Styling Lists

CSS 1/2 Reference

CSS Selectors

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.