Advanced Tag SelectorsS2C Home « Advanced Tag Selectors

In lesson 4 of the CSS Basic Tutorials we looked at some basic tag selectors (universal, tag, class and id). In this lesson we take a final look at tag selectors and how we can combine them, narrowing down what we actually want to select and style.

Combining Tag Selectors

Tag selectors apply to every occurrence of a particular HTML tag on the webpage. By combining tag selectors we can refine which tags we style, narrowing down our style selection.

Lets see some examples of combining tag 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 2: Finishing The Box Model.

You saved the file to your computer in the C:\_CSSIntermediate folder as lesson_2_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 Advanced Tag Selectors follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Intermediate CSS - Lesson 3 - Advanced Tag Selectors</title>

<style type="text/css">

/* Basic Tag Selectors */
img {
  border: solid 3px aqua;
}


/* Advanced Tag Selectors - Multiple elements with same style
   Selects all p and img elements */
p, img {
  background-color: olive;
}


/* Advanced Tag Selectors - Descendant selectors 
   Selects all img elements within p elements */
p img {
  border: solid 2px red;
  margin: 10px;
  padding: 10px;
  background-color: yellow;
}


/* Advanced Tag Selectors - Child selectors
   Selects all p elements who have an immediate div element Parent */
div>p {
  color: green;
  background-color: silver;
}


/* Advanced Tag Selectors - Adjacent sibling selectors
   Selects all p elements that directly follow a div element */
div+p {
  color: white;
  background-color: orange;
}

</style>

</head>
<body>
<h1>CSS Intermediate</h1>
<h2>Advanced Tag Selectors</h2>
<div>
<img src="http://server2client.com/images/beefalepiesmall.jpg"
    alt="Beef and Ale Pie" />
</div>
<p>A paragraph following a div element.</p>
<p>A paragraph that isnt within a div or following it directly.</p>
<p>A paragraph holding an image.
<img src="http://server2client.com/images/beefalepiesmall.jpg"
    alt="Beef and Ale Pie" /></p>
<div>
<p>A paragraph with an immediate div ancestor.</p>
<ul><li>
<p>A paragraph within a list.</p>
</li></ul>
<p>A paragraph with an immediate div ancestor.</p>
</div>
<p>A paragraph following a div element.</p>
</body>
</html>

Save the file in the C:\_CSSIntermediate folder as lesson_3_csspage.html and close the Notepad.

save advanced tag selectors

Viewing Our Saved File

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

advanced tag selectors

Reviewing The Code

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

/* Basic Tag Selectors
Ok, let's start with the first image shown in the screenshot above. This image isn't within a <p> element, so will have the basic tag selector we styled for the <img /> tag applied to it, in our code above.

/* Advanced Tag Selectors - Multiple elements with same style
We then made a style for all <p> and <img /> tags with an olive background. A point to note here is that this background colour would also be applied to our original <img /> tag style because it has the same specificity. This is because it comes after the first style and would overwrite any background colour we applied in that style. We will go into the details of specificity and the cascade later in this section, in CSS Intermediate Lesson 6: Specificity (the cascade).

/* Advanced Tag Selectors - Descendant selectors
If you look at the second image and compare it to the first image you can see that the background colour and border have changed. This is because we used a different style for <img /> elements within <p> elements.

/* Advanced Tag Selectors - Child selectors
There are two paragraphs with a silver background and green writing shown in the screenshot above. These <p> elements are direct descendants of <div> elements and will be styled accordingly. We will go into the details of inheritance later in this section, in CSS Intermediate Lesson 5: Style Inheritance. Of note here is that the other <p> element in this <div> element defaults to the general style we styled for <p> elements. This is because its immediate ancestor isn't a <div> element.

/* Advanced Tag Selectors - Adjacent sibling selectors
There are two paragraphs with a orange background and green text shown in the screenshot above. These <p> elements come immediately after a <div> element and will be styled accordingly. This applies to the closing tag of the <div> element and could for instance be used to highlight the first paragraph of a new section.

Lesson 3 Complete

Experiment with the styles above and see what results you get, maybe add another element or remove the paragraph from the unordered list and see what happens. 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 Intermediate Tutorials - Lesson 4 - Pseudo Selectors

CSS Advanced Tutorials - Lesson 2 - Attribute Selectors

What's Next?

We continue our investigation of selectors with some pseudo classes we can use in specific situations.

CSS Reference

CSS Selectors

go to home page Homepage go to top of page Top