SIDEBAR
»
S
I
D
E
B
A
R
«
Different Types of Selectors in CSS
by sheri

Different Types of Selector in the CSS

CSS Selectors, as the name implies, select an element corresponding to it in the coding of your HTML web page. There are a number of selectors depending upon their scope throughout the web page. Availability of a number of selectors in the CSS makes it different, more reliable, and one of the most powerful languages over the Internet. You must choose any selector according its scope throughout your web page i.e., how much you want to use it in your web page. So, below are a list of selectors used while designing CSS for a web page.

Universal Selector

Universal Selector is represented by an asterisk (*) sign also called a wildcard. With this selector we can any or all elements in the document. It is defined as

* { color : red; }

The above example will apply red color to all the foreground text to all the elements. It includes headings, paragraph, div element, cells in tables, etc..

Element Selector

An element selector selects every element in the document that matches the tag designed with that selector. Element selector is more specific than that of the Universal Selector.  For example,

ex { color: red; }

In this, every ex tag in the document will be given red foreground color. These are also called as type selectors too. If there are a number of elements corresponding to this tag then it will be modified according to the attribute properties specified under this selection.

Class Selector

Class Selector selects any element that have a class attribute corresponding to that class. The class attribute is known to be a global attribute so we can specify it with any element. It is preceded by a dot (.), and helps in designing the document.

.info { color: green; }

ID Selector

An ID Selector selects only the value specified in the id attribute. It is preceded by an octothorpe (#). This is recommended to use once in a document. An example to declare an ID selector is given below.

# intro { color: blue; }

Pseudo Selector

Pseudo Selector is somewhat similar to the class selector due to its same scope. Pseudo Selector precedes by a colon (:), and only a few pseudo classes are available in CSS.

: link { color: blue; }

: visited { color: purple; }

: active { color: red; }

: hover { color: green; }

: focus { color: orange; }

The above mentioned pseudo class selectors have their specific meaning. The : link pseudo class selector selects all those texts which are hyperlinks. They  : visited one selects those which are hyperlinks and are visited by the user. The : active pseudo class selector selects the link in an active state. The : hover pseudo class selects that text that is hovered by your pointing device on the screen. The  : focus pseudo class selects the elements that are focused.

Combining Selector

Combining selector is a selector in which we combine two selectors altogether. Like an element selector with an ID or an ID with a Class selector. This is basically done to narrow the scope of the selector.

p.element { color: red; }

In the above example, whenever this selector is called it will be called under a paragraph tag with the element class mentioned in it.

Grouping Selector

Grouping Selector, as the name implies, group them together under same properties. A grouping of more than one selector allows you to set properties of those elements same. It is done like,

H1, p, div { color: blue; }

In the above example, whenever<h1>, <p>, and <div> tag is used in the document then the color of the foreground text will be blue. As all these elements are grouped under same property and its value.


Comments are closed

SIDEBAR
»
S
I
D
E
B
A
R
«
© Copyright cssblaze.com