Selectors – CSS

It is used to apply style to html element to change its look and feel. A selector can be html element name, id or class.

In css four types of selectors are there:

1. Element selector
2. Id selector
3. class selector
4. * universal selector (Asterisk symbol)

Element selector

Element name is used to select html element, style is applied to all elements with that name.

div{
      height: 100px;
      width:200px;
      text-align: center;
      color: green;
}

All div elements are styled with above style.

Id selector

It is used to select specific html element to style. Id’s are unique, so it cannot be reused with other html elements. # symbol is prefixed with id name.

#mydiv{
       height: 100px;
       width:200px;
       text-align: center;
       color: green;
}

Style will be applied to Element with mydiv id.

Class selector

To apply same style to multiple html elements, class selector is used. Different classes can be used with same elements separated by space. class attribute is used with html elements . dot or period is prefixed with class name.

.textred{
	color:red;
}

.bg-yellow{
	background-color:yellow;
}

<div class="textred bg-yellow">
Multiple classes are applied, in a single HTML element
</div>

<div class="textred">
Single class is applied.
</div>

* universal selector (Asterisk symbol)

Used to select all html element at once in a webpage.

*{
	color:red;
   background:grey
}

Use to apply style to all html elements in a webpage or multiple webpages.