Selectors in Cascading style sheet (CSS).

Selectors are used to provide specified settings (effect) to content within specified elements.

There are four types of selectors.

  • Universal selector.
  • Type selector.
  • Class selector.
  • ID selectors.

Universal selector.

The universal selector points to all elements. It provides specified effect to all elements within a page.
Universal selector is indicated as asterisk (*).

Example:

*
{
    font-family: Arial;
}

In the above example, the universal selector changes the font family of all textual content to Areal.

Type selector.

Type selectors points to an HTML element (HTML tag). Type selectors provides specified effect to specified elements within a page.

Example

h1
{
    color : blue;
}

In the above example, Text within H1 tag will become blue.

Class selector.

Class Selector can provide an effect to multiple HTML element using class attribute. Class selector is usable, because we provide an effect to multiple element using values in the class attribute. This is handy when you want to give the same type of formatting to a number of unrelated HTML elements. The class selector is always prefixed by a dot symbol (.).

Example.

.bluefont
{
color : blue;
}

We can use this class in following way.

<h2 class=”bluefont”>welcome to seowebsiteblog.com</h2>
Here you will get knowledge about <span class=”bluefont”> SEO, web designing, content marketing etc.</span>

The output will look like this.

class selector

You can assign class for specific element. If you have more elements contain same class like above example, then assigning class to specific element will become more useful. Look at following example.

.bluefont
{
color : blue;
}

h2.bluefont
{
color : red;
}

In above example Class bluefont will change its feature only for element H2. Output will look like this.

class selector with specific element

ID selectors.

ID selector is similar to class selectors. There are very small amount of differences between Id selector and class selector. Otherwise, both have same workings and uses. The Id selector is always prefixed with a hash symbol (#).

Example :

#bluefont
{
color : blue;
}

We have taken the same example, like class selectors. We will just place the ID in place of class We can use this class in following way.

<h2 id=”bluefont”>welcome to seowebsiteblog.com</h2>
Here you will get knowledge about <span id=”bluefont”> SEO, web designing, content marketing etc.</span>

The output will look same as output of class selectors.

Group of selectors.

Look at the following example.

h1
{
    color : blue;
}

h2
{
    color : blue;
}

In the above example, the same effects are repeated twice for different elements. To remove this repetition we can group elements which need same effects. Look at following example.

h1,h2
{
    color : blue;
}

This example will work same as above example. Also we have removed unnecessary redundancy.

 

Comments

comments