Basics of CSS Selectors
CSS Basics – Part 12
CSS Course
Foreword: In this part of the series, I say a bit more on selectors.
By: Chrysanthus Date Published: 15 Dec 2015
Introduction
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.
That is it for this part of the series.
Chrys
Related Links
Basics of HTML 5Basics of ECMAScript
HTML DOM Basics
CSS Basics
CSS Rendering for HTML
Simple Guide to Website Design
CSS Multi-column Layout Module
Media and CSS
Responsive Web Design
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course
BACK