Basics of CSS Selectors

Introduction
This is part 14 of my series, Basics of CSS2. It is the last part of the series. In this part of the series, we say a bit more on selectors.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Single Tag Name Selector
I have used only one HTML element tag name in most of the selectors that we have seen. When there is only one element tag name without any modification to the tag name, all the HTML elements in the web page, will have the presentation in the declaration block of the CSS rule concerned. The following code illustrates this (try it).

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

p {background-color:lightblue}

This is the first Paragraph.

This is the second Paragraph.

This is the third Paragraph.

There is a CSS rule in the above code. The declaration block determines a light blue background color. The selector consists of an unmodified single Paragraph tag name. So all the paragraphs in the web page have a light blue background color.

Under this condition, you might have the following questions: How do we address only one HTML element (paragraph), when there are many elements of the same type. How do we address a sub set of elements of the same type. If we have the same presentation for different types of elements can we use one CSS rule? All these questions will be answered in this article. The selector is the key to the answers. In order to solve each of the problems, the selector has to be modified. The modified selector is called a pattern as the following sections illustrate. In the following patterns E stands for an HTML element.

E#ID Pattern
If you want the CSS rule to match (be applied) to just one HTML element, in the selector, start with the tag name of the element; follow it with the # character, and then the ID of the element. Just make sure the element has this ID. Such a pattern is called an ID Selector. For the above code, if you want only the second paragraph to have the presentation of the declaration block, give the second paragraph an ID and use the ID in this pattern in the CSS rule selector. The following code illustrates this:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

p#pa1 {background-color:lightblue}

This is the first Paragraph.

This is the second Paragraph.

This is the third Paragraph.

E.className Pattern
This pattern is used when you want the CSS rule to be applied to a sub set of all the elements with the tag name, E. You begin the selector with the tag name of the HTML element. This is followed by a dot, and then a name you give to the subset. HTML has an attribute called the Class attribute. You give this attribute to each of the elements you want for the subset. The value of this attribute for the sub set elements is the className in the patter. This kind of pattern is called a class selector. In the following code, there are 4 paragraphs. I decided to make the first and third paragraphs a sub set. You can call this sub set a class. In programming a class is set (or sub set) of items with the same characteristics. Read and try the code. Note the use of className in the style sheet and in for the HTML elements.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

p.mysubSet {background-color:lightblue}

This is the first Paragraph.

This is the second Paragraph.

This is the third Paragraph.

This is the third Paragraph.

Do not confuse between the class selector and the pseudo-class selector we saw in the previous part of the series. The class selector deals with a sub set of all the HTML elements having the same name. The pseudo-class selector deals principally with HTML elements that are in a particular situation.

E, E, E Pattern
If you want the same presentation for HTML elements of different types, you use this pattern. For the pattern, you simply type the tag names of the HTML elements, separating them with commas. This kind of selector is called the grouping selector.

Imagine that you have H1 elements, Paragraph elements and button elements in a web page and you want all of them to have the same background color. You will just have one CSS rule, like this:

H1, p, button { - - - }

Read and try the following code, which uses the "Paragraph class selector":;

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

h1, p.mysubSet, button {background-color:lightblue}

Heading One

This is the first Paragraph.

This is the second Paragraph.

This is the third Paragraph.

This is the third Paragraph.

Button 1 Button 2

In this pattern, you do not only need to have single tag names in the selector; you can have modified tag names like "p.mysubSet" above.

Ending
A selector is a pattern of HTML element tag names, CSS Pseudo elements and CSS Pseudo classes. This pattern, matches one or more HTML elements or characteristics in the web page. The elements or characteristics matched, acquire the presentation in the declaration block of the selector.

Where do you go from Here?
We have come to the end of this part of the series and the end of the series. I hope you appreciated it. Where do you go from here? I have a set of three series I am writing. The first series is XHTML Basics. XHTML is what I consider as the latest version of HTML. It is in this blog. The second series is this one, Basics of CSS2. The third series is for the computer language called JavaScript. My aim is to train people to become web site designers.

So, if you have covered the two series, that is good! You have the third one for JavaScript to cover. After that you should be able to design good web pages and web sites.

Prerequisite for Studying JavaScript: To study any computer language, the main problem is your level of mathematics. If you are in a college studying accounting or management or some science discipline, you might be learning a computer language to solve problems in that discipline (or related subjects). So the prerequisite to study that language may be level of math and something in your discipline.

The aim of studying JavaScript in addition to the other two series is to be able to design a good web site. The prerequisite to study JavaScript is XHTML (or HTML 4), CSS and a reasonable level of math. That reasonable level of math is a pass in middle school mathematics (British O' level mathematics). If you did not succeed in middle school mathematics, do not worry; there is a solution. Note: JavaScript makes your web page interactive, instead of static as we have learned from XHTML and CSS.

The solution is that there is a web site with URL, http://www.cool-mathematics.com . This site offers the middle school mathematics course. It is not only for people who are science inclined. It is for everybody. There, math is treated in a step by step, easy to follow fashion, taking into consideration the fact that you might not have been good in math. But at the end of the day you become good in math. You can do the math course for as short as three months and as long as 10 months.

If you did not have a pass in middle school mathematics, then you should do that course at that web site. It is an online interactive course and you have the right to ask questions to a human tutor, in each part of the series, just by filling a form.

If you covered middle school mathematics and did not pass, you can still learn JavaScript; but with difficulties. In that case, I strongly advice you to study math at that site.

I thank you for reading this article.

Good Luck!

Chrys