CSS Selectors

CSS selectors

In CSS, selectors are patterns used to select the element(s) we want to style.
When we add styles for a web page,we can use tag names, class, id, pseudo classes and attribute values in selectors. This allows your rules to be more specific. Two attributes have special status for CSS. They are Class and ID.

What are CSS Selectors?

We’ll see the CSS selectors and its explanations.

CSS Selectors-Class selectors

Use the class attribute in an element to assign the element to a named class. It is up to you what name you choose for the class. Multiple elements in a document can have the same class value. In your stylesheet, type a dot (.) before the class name when you use it in a selector.


.myclass {
	//style rules here..

CSS Selectors-ID selectors

Use the id attribute in an element to assign an ID to the element. The ID name must be unique in the document. We can use any meaningful name for the ID, that will make easy while debugging. A hash (#) followed by a name is used for ID selector in CSS.


#myId {
	//style rule here...

CSS Selectors-Pseudo-classes selectors

A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. Pseudo-classes allow you to format items that are not in the document tree. Pseudo-classes, together with pseudo-elements, let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on some form elements), or the position of the mouse (like :hover which lets you know if the mouse is over an element or not).

Pseudo classes are:


a {}
a:link {}
a:visited {}
a:hover {}
a:active {} 

CSS Selectors-Descendant selectors

Descendant selectors are used to select elements that are descendants of another element in the document tree.


ul li span {

Child Selector

A child selector is used to select an element that is a direct child of another element (parent). Child selectors will not select all descendants, only direct children.


div > p { color: red; }

CSS Selectors-Universal Selectors

What is * in css? Universal selectors are used to select any element. Following is an example for universal selector. This rule set will be applied to every element in a document:

* {
  margin: 0;
  padding: 0;

CSS Selectors-Attribute selectors

All HTML elements can have associated properties, called attributes. These attributes generally have values. Any number of attribute/value pairs can be used in an element’s tag – as long as they are separated by spaces. Attribute selectors are used to select elements based on their attributes or attribute value.


a[href="#myId"] { color: #000; } 
img[alt~="small"] { border: 1px solid #000; } 

CSS Selectors-Adjacent sibling selectors

Adjacent sibling selectors will select the sibling immediately following an element.


Heading 2

Heading 3

This is text

h2 + h3 {margin: -1em; }

CSS Selectors-Pseudo-elements

Pseudo-elements allow us to style information that is not available in the document tree. For instance, using standard selectors there is no way to style the first letter or first line of an element’s content.

p:first-line {font-weight: bold; } 
p:first-letter {font-size: 30px; font-weight: bold; } 
label, , , , , , , , , , , , ,

About the author