CSS Selector

Selectors

You probably often read this term across the web design/development blogs you visited:

“Selectors”

The Selector in CSS is the syntax used to target any parts on the HTML document for the styles to be applied to. There are three basic selectors we are going to discuss here, as they probably will be the common selectors used on your first website. We’ll cover others in future posts.

Type Selector

We have mentioned once above, Type selector will target any specified HTML elements on the document. For example:

p {
    /** declaration **/
}

will match all the p or the paragraph elements and using it will eventually overwrite the default styles given from the browsers.

Class Selector

When you have added a class or even many classes to an element, you can also target those classes. TheClass Selector begins with a dot parameter.

.box {
    /** declaration **/
}

The above snippet will match all elements that have the box class, or we can also select more specifically.

p.box {
    /** declaration **/
}

It will target only the p element that has the box class.

When we are using the Class selector, all the same styles declaration from both the Type selector and theDefault Browser will be overwritten.

ID Selector

The ID is a very restrictive attribute, we can only have one id on an element and it must be unique as well.

<div id="content">Content</div>

In case we have an id in an element, we can use the id selector to target that element; the id selector is defined with a hash # parameter.

#uniqueID {
    /** declaration **/
}

Since the ID is unique, it has the strongest priority level of the type of selector. So, when we declare styles with the ID selector it will ultimately overwrite all the same declaration from the ClassType selectors and the Default Browser styles.

Print Friendly

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>