Basics of CSS3 Selectors
CSS3 Basics – Part 20
Forward: In this part of the series, I say a bit more on selectors.
By: Chrysanthus Date Published: 23 Jul 2012
Introduction
Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.
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).
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {background-color:lightblue}
</style>
</head>
<body>
<p>
This is the first Paragraph.
</p>
<p>
This is the second Paragraph.
</p>
<p>
This is the third Paragraph.
</p>
</body>
</html>
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.
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:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p#pa1 {background-color:lightblue}
</style>
</head>
<body>
<p>
This is the first Paragraph.
</p>
<p id="pa1">
This is the second Paragraph.
</p>
<p>
This is the third Paragraph.
</p>
</body>
</html>
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.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p.mysubSet {background-color:lightblue}
</style>
</head>
<body>
<p class="mysubSet">
This is the first Paragraph.
</p>
<p>
This is the second Paragraph.
</p>
<p class="mysubSet">
This is the third Paragraph.
</p>
<p>
This is the third Paragraph.
</p>
</body>
</html>
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.
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”:;
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1, p.mysubSet, button {background-color:lightblue}
</style>
</head>
<body>
<h1>Heading One</h1>
<p class="mysubSet">
This is the first Paragraph.
</p>
<p>
This is the second Paragraph.
</p>
<p class="mysubSet">
This is the third Paragraph.
</p>
<p>
This is the third Paragraph.
</p>
<button type="button">Button 1</button> <button type="button">Button 2</button>
</body>
</html>
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.
Conclusion
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.
This is the last part of this series. You have learned the basics of CSS3. Your problem now is that you do not know where to use the features you have learned in this series. You may be able to solve this problem yourself, but it would be much easier if you were taught what to do. In the next series, titled, Mastering CSS3, you will learn more features of CSS3 and learn where to use CSS features.
Where do you go from here? This series is part of a major in website design. So from here you go to the next series in this blog titled, Mastering CSS3. After that you will learn, ECMAScript 5 Basics. ECMAScript 5 is a simple programming language (scripting language) that you use to make your website more interactive. After that, you learn a few more series and everything being equal you would be a professional in website design.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course