CSS Selectors

In this article I am covering some CSS Selector. Selectors mainly used for targeting the tags and elements which we write in HTML. List of the commonly used selector .

• Universal Selector

• Element Type Selectors

• Descendant Selectors

• Id Selectors

• Class Selectors

• Child Selectors

Universal Selector

The CSS universal selector (*) matches elements of any type. Example:1 - If we wanted every element to have a solid 4px wide border, we would use the following CSS rule:

* { 
border: 4px solid black;
  }

Example:2 -Set the Margins and Padding for all elements on the page to zero.

* {
margin: 0
padding: 0
  }

You can read more about Universal Selector here

Element Type Selectors

The most basic CSS selectors are Element Type Selectors. It selects all elements of the given type within a document. For example, if we wanted to make all paragraphs have green text, we would use the following CSS rule:

p {
 color: green;
  }

You can read more about Element Type Selectors here

Descendant Selectors

The descendant combinator — typically represented by a single space (" ") character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc) element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors.

Syntax

selector1 selector2 {
  /* property declarations */
}

For example, if we wanted all emphasized text in our paragraphs to be purple text, we would use the following CSS rule:

p em {
  color: purple ;
   }

You can read more about Descendant Selectors here

Id Selectors

Match an element that has the specified id. To match a specific id attribute, we always start the selector with a hash symbol (#), to signify that we are looking for an id value. The hash is followed by the id attribute value we want to match. Remember, we can only use the same id attribute value once, so the id selector will always only match one element in our document.

Syntax

#id_value { style properties }

OR

[id=id_value] { style properties }

You can read more about Id Selectors here

Class Selectors

The CSS class selector matches elements based on the contents of their class attribute.

Syntax

.class_name { style properties }

OR

[class~=class_name] { style properties }

You can read more about Class Selectors here

Here are some articles with more information about CSS Selectors.

• CSS Selector