Advanced Java and Web Technologies for JNTUK
Blog providing beginner tutorials on different web technologies like HTML, CSS, Javascript, PHP, MYSQL, XML, Java Beans, Servlets, JSP and AJAX

28/01/2014 Categories: CSS. No Comments on CSS Selectors

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:

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:

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:

The above CSS rule applies red color to the first paragraph which is having the para1 value for the id attribute.

Suryateja Pericherla

Suryateja Pericherla

Hello, I am Suryateja Pericherla working as an Asst. Professor in CSE department at Vishnu Institute of Technology. I write articles to share my knowledge and make people knowledgeable regarding certain topics.
Suryateja Pericherla

Latest posts by Suryateja Pericherla (see all)

Related Links:

Note: Do you have a question on this article or have a suggestion to make this article better? You can ask or suggest us by filling in the below form. After commenting, your comment will be held for moderation and will be published in 24-48 hrs.

Leave a Reply

Scroll Up