CSS - Selectors, Type & Example

A CSS Selector is the part of CSS rule set that actually selects the content which you want to style. As the name suggests it selects and manipulates the HTML documents (s). So they are used to select and manipulate the HTML documents on the basis of their id, class, type and attributes and some more.

CSS Selectors

A CSS Selector is the part of CSS rule set that actually selects the content which you want to style.

As the name suggests it selects and manipulates the HTML documents (s). So they are used to select and manipulate the HTML documents on the basis of their id, class, type and attributes and some more.

Universal Selector

The universal selector works like wild card character. It will select the all the element of the page. The universal selector is written  " * " matches the name of the element type. If you define universal selector than all element will affect by it. It is widely used to combine with another selector.

CSS Example

*{
    margin:0;
    padding:0;
}
Above example will make the all elements margin and padding '0'. 

CSS Example

*{
       color:#f00;
       font-size:#0f0;
       background-color:#fff;
}
Here color, font-size, and background-color are defined inside the universal selector. As you can see universal selector is declared with an asterisk " * ".

Element selector

The element selector selects the HTML documents on the basis of their elements name. This selector must match the one or more HTML element of the same name.  For instance, all the elements included inside the tag <p> can modify. Below is the example:

CSS Example

p {
      text-align: center;
      color: red;
}

HTML Section

<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
There is three paragraph <p> element all are affected by the above style. Note that if there are more other elements than you have to pick up them to style.

ID Selector

The ID selector is declared using hash [#] or pound symbol preceding a string of character.  ID selector is a unique selector that is specially used to find the unique element. It uses the id attribute to find the specific element of an HTML tag.

CSS Example

#para1 {
    text-align: center;
    color: red;
}

HTML Section

<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
The element is pointed by id #para1 while styling #para1 that won't affect other paras.
Here #para1 is the string character which is defined by the developer to indicate the element easily.

Class Selectors

This is the one of the most useful selectors of CSS. It is declared with the ( . ) preceding with the character. This one finds the elements with the specific class and uses the HTML class attribute. To find the elements, we must write a period character followed by the name of the class.

CSS Example 

.center { 
             text-align: center; 
             color: red;
}
The class selector is always declared with the ( . ) dot sign.

HTML Section

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>

You May Also Like...