CSS Selectors

CSS Selectors means by which you want to find or select the element and access one or more elements.

There are many types of element selectors which are based on their name, id, class, attribute and many others.

The element Selector

The element selector works on the name of HTML elements such as <p> or <a> or <div> or <any of the html elements>.

For example,

If we want to select all the <p> elements and want to apply some rule, the following rule will ensure that all text within <p>...</p> tags is fully center aligned with text color blue:

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

The id Selector

When you want to select just single element in from the page, the id selector is the perfect match for your requirement.

The id selector selects the element on the bases of id given to specific HTML element.

If you give a specific id to an HTML element, you can apply the CSS rules to that element specificly.

To select the element using id selector, write #(hash) and then id of the element.

For example,

If you want to select an HTML element which has given the id = “myId”, you should write:

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

Keep In mind :

• The id name of element should not start with a number.

• Id should be unique within the page.

• If you give same id name to multiple elements within the page, the id selector will work with the first match of the HTML elements. 

The class Selector

If we want to apply the same style to number of elements in a page, you can give a same class name to all the elements.

Using the class selector, you can give multiple elements the same style by just defining a single rule.

To select elements using class selector, we need to write (.) character following by the name of class.

For example,

If you want to style all the elements which has given the class = “myClass”, you should write:

.myClass {
           text-align: center;
           color: red;
}

In the example above, all HTML elements with class="myClass" will be red and center-aligned.

We can also apply the style rule to specific HTML element.

For example,

If you want to style all the <p> element which has class “myClass” , you should write,

p.myClass {

        text-align: center;
        color: red;

}

In above example,

All the <p> elements which has class “myClass” will be aligned center and red. Other elements with the class name “myClass” will not be affected.

HTML elements can refer to more than one class.

A class name should not start with a number.

Selecting by Group

Using CSS you can apply same rule to more than one element, class, or any other type of selector by separating the selectors with commas.

For example,

You have elements with the same style rule, like below:
p {
text-align: center;
color: red;
}

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

.myClass {
text-align: center;
color: red;
}

So you can group the selectors by using (,) comma separator and also minimize the code like:

p, #myId, .myClass { text-align: center; color: red;}