tutorialstonight logo
A Platform To Learn To Code

CSS SELECTORS



The selector in CSS is used to choose the element you want to style. It is part of the CSS rule set. CSS provides us various ways to select an element.

We will discuss 5 different selectors here:

  1. Universal selector CSS
  2. Class selector CSS
  3. Id selector CSS
  4. Element selector
  5. Group selector



1).Universal selector CSS

If you want to style all elements of the web page in some way then use universal selector.

It select every single on the page.It starts with an asterisk symbol ( * ).

Universal Selector

Run the code

2).Class selector CSS

The class selector is used to select the element which has a class attribute.

The class selector is written with period( . ) followed by class name.

To select any element just give the class attribute with the name of class you want to specify.

Class Selector

Run the code

We can also mention multiple classes in single element.Property changes of all classes will take on that element.

Multiple Classes

Run the code

3).Id selector CSS

id selector is used to style a single and unique targeted element.

The id selector is written with hash symbol (#). It selects only one unique element as id in an HTML document.

Id Selector

Run the code

4).Element selector

Element selector is used to select the element on the base of element name.

To select the element name the element and write its property and value.

Element Selector

Run the code

5).Group selector

In case we have the same CSS property for the multiple element like as below:.

Multiple Element have same CSS property


Instead of defining CSS property like as above we can use group selector.In group selector we define single CSS code and selector is separated with comma.See the example below:

Group Selector

Run the code

We can also use group property on id same as on element.

Group Selector Id

Run the code




BOX

BOX