CSS Selectors || Bcis Notes

CSS Selectors

CSS selectors are used to selecting the content you want to style. Selectors are the part of the CSS ruleset. CSS selectors select HTML elements according to its id, class, type, attribute, etc. There are several different types of selectors in CSS.

i.   CSS Element Selector:

The element selector selects the HTML element by name.

CODE:

Result:

ii.  CSS Id Selector:

The id selector selects the id attribute of an HTML element to select a specific element. An id is always unique within the page so it is chosen to select a single, unique element. It is written with the hash character (#), followed by the id of the element.The CSS rule below will be applied to the HTML element with id=”para1″:

Syntax: #idname
Example: #toc will match the element that has the ID “toc”.

CODE:

Result:

iii.  CSS Class Selector:

The class selector selects HTML elements with a specific class attribute. It is used with a period character. (full stop symbol) followed by the class name.

Syntax: .classname
Example: .index will match any element that has a class of “index”.

CODE:

Result:

iv.  CSS Universal Selector

Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.

Syntax: * ns|* *|*
Example: * will match all the elements of the document.

CODE:

Result:

v.   CSS Group Selector

The grouping selector is used to select all the elements with the same style definitions. Grouping selectors are used to minimizing the code. Commas(,) are used to separate each selector in a grouping.

Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

CODE:

Result:

You may also like: CSS Syntax