The fundamental elements in the style rules are selectors. The selectors determine on which elements the styling must be applied. The HTML elements selected by selectors are called the subjects of the selectors. A selector may be a simple selector if the selector contains only the name of an element or a selector may be a complex selector if the selector is made up of one or more simple selectors separated by combinators such as a white space, “>” or “+”.
Grouping
Elements having common styling can be grouped together by separating each selector with a comma (,). Consider the following CSS example:
h1{ color:red }
h2{ color:red }
h3{ color:red }
The above CSS is equivalent to the following CSS:
h1,h2,h3 { color:red }
Type Selectors or Simple Selectors
A type selector is a simple selector which is the name of a HTML element (tagname). The styling is applied to all the HTML elements in the document matching with the type name. Consider the following CSS code:
p { color:green; font-size:20px; }
The above CSS style rule applies the styling (text color and size of the font) to all paragraph elements in the document.
Universal Selectors
CSS has a special selector *, which selects all elements in the document. For example, the following CSS rule makes the text inside all the HTML elements red:
* { color:red; }
Descendant Selectors
The descendant selectors are also known as contextual selectors. These selectors allow us to select all the descendents of a particular element in the HTML document. A descendant selector contains two or more simple selectors separated by a white space. Consider the following CSS rule which applies red color to all the <b> tags inside a <p> tag:
p b {color:red;}
Child Selectors
The child selectors are used to select the immediate children of a particular element. A child selector contains two are more simple selectors separated by “>” symbol. Consider the following CSS rule which selects only the immediate <b> child tags of <p> tag:
p > b {color:red;}
The child selectors can be combined with other selectors like shown below:
body > * – Selects all children of the <body> element.
body > * > * – Selects all the grandchildren of the <body> element.
body > * > p – Selects all <p> grandchildren of the <body> element.
p + div – Selects all div elements that are placed immediately after <p> elements.
Pseudo Classes and Elements
Pseudo classes match elements using information other than the name, content or attributes of the element, like the states of an anchor element. Pseudo elements are used to select the sub parts of an element like the first line in a paragraph or the first letter of a line in a paragraph. The general forms of pseudo class and pseudo elements are as shown below:
selector:pseudo-class {declaration}
selector:pseudo-element {declaration}
Consider the following examples of pseudo classes:
p > span:first-child – selects the first span element in a paragraph if any.
ul > li:first-child – selects the first list item in a unordered list.
ul > li:last-child – selects the last list item in a unordered list.
p > span:only-child – selects the span element if it is the only child element in a paragraph.
a:link – selects regular (fresh) links
a:visited – selects visited links
a:hover – selects the link on which the mouse pointer is placed
a:active – selects the link on which the mouse is pressed or released
a:focus – selects the link which gets the focus through keyboard or by other means
The order in which the pseudo classes for the anchor element should be written is as follows:
a:link
a:visited
a:focus
a:hover
a:active
Consider the following examples of pseudo elements:
p:first-line – selects the first line of a paragraph.
p:first-letter – selects the first letter of the first line in a paragraph.
body > ol > li:before – Used to insert content before every list item.
body > ol > li:after – Used to insert content after every list item.
Below example shows how to automatically insert chapter numbers before the list items in an ordered list:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
HTML Code:
<html>
<head>
<style type=”text/css”>
ol {list-style-type: none}
</style>
</head>
<body>
<ol>
<li>HTML</li>
<li>CSS</li>
</ol>
</body>
</html>
|
1
2
3
4
5
6
7
|
CSS code:
body > ol > li:before
{
content: “Chapter “ counter(chap) “: “;
counter-increment:chap 1;
}
|
The content property in the above example is used to specify the content to be inserted before or after the element. counter is a function which accepts an identifier and an optional list-style parameter and displays the value of the identifier. The counter-increment property is used to increment the value of an identifier. By default the increment is 1. The default of an identifier is 0. We can also use the property counter-reset to reset the value of a counter.
Attribute Selectors
Attribute selectors allows a CSS developer to select the HTML elements based on the presence of a certain attribute or an attribute having a specific value. Below are examples which demonstrate the usage of attribute selectors:
a[href] – This is a simple attribute selector which selects all anchor elements with href attribute. If the element name (anchor) is removed, it assumes all elements in the document having href attribute.
a[target = ”_blank”] – selects all anchor elements whose target attribute is set to “_blank”.
a[title ~= ”start”] – selects all anchor elements whose title attribute contains the word “start”.
p[lang |= “en”] – selects all the paragraph elements whose lang attribute is equal to “en” or beginning with “en” immediately followed by a hyphen (-).
a[href ^= “mailto”] – selects all anchor elements whose href attribute starts with “mailto”.
a[href $= “.pdf”] – selects all anchor elements whose href attribute ends with “.pdf”.
a[href *= “blog”] – selects all anchor tags whose href attribute contains the word “blog”.
Class Selectors
These selectors are used to apply styling on HTML elements with their class attribute set. The class attribute is used to group several HTML elements together and applying common styling to all of them. The class names (value of the class attribute) are case-sensitive. So, class1 and CLASS1 are two different class names. The class selectors should be used only when other types of selectors cannot address your problem. A dot (.) is used along with the class name to apply styling for the elements. Below is an example which demonstrates the use of class selector:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
HTML Code:
<p class=”para”>This is paragraph 1</p>
<p class=”para”>This is paragraph 2</p>
<p class=”para”>This is paragraph 3</p>
CSS Code:
.para {color:red;}
or
p.para {color:red;}
|
In the above code, the text in all the three paragraphs will be red.
ID Selectors
The attribute id of an element is a unique identifier in a web page. No two id attributes can have the same value. Although the use of id is similar to class, they differ in the sense that the id attribute is used to identify a unique element, while the class attribute is used for multiple elements. For selecting the element with an id attribute, use the hash (#) symbol followed by the value of the id attribute.
An id can have only alphanumeric characters and hyphens (-). It should not have any underscore or white spaces. The first character in the id value cannot be a number. Id names are case sensitive. So, id1 and ID1 are different. Below example demonstrates the use of ID selector:
1
2
3
4
5
6
7
8
9
10
|
HTML Code:
<p id=”para1”>This is paragraph 1</p>
<p id=”para2”>This is paragraph 2</p>
<p id=”para3”>This is paragraph 3</p>
CSS Code:
#para1 {color:red}
|
The above CSS rule applies red color to the first paragraph which is having the para1 value for the id attribute.
Take your time to comment on this article.
EmoticonEmoticon