Web Development

Types of CSS Selectors

Types of CSS Selectors is the section 2 of Beginner’s Guide to CSS.

In our 1st section we learned about the syntax of writing a CSS ruleset. There we mentioned something called a selector. Let’s go more detail on what is actually a selector.

CSS selectors allow you to select and manipulate HTML element. CSS selectors are used to find HTML elements based on their id, classes, types, attributes, values of attributes and much more. Let’s look into these different types.

Element Selector

The element selector selects elements based on the element name. If you want to style a paragraph, you can choose ‘p’ as the selector. Or if you want to style a heading, use the heading h1, h2, h3..etc what ever you like as the selector. 

[code language=”css”] p {
text-align: center;
color: red;
}
[/code]

In the above example we use the tag as the selector. Now all the paragraphs written with the paragraph element are center aligned with font color red.

Id Selector

The id selector uses the id attribute of an HTML element to find the specific element. So id should be unique within a page. If so you can use the id selector when you want to find a single, unique element and define its style.

To find an element with a specific id, write a hash character (#), followed by the id of the element.

[code language=”css”] #my_element {
text-align: center;
color: red;
}
[/code]

The style rule above will be applied to the HTML element with id=”my_element”. So all the text content inside that element become aligned center with font color red.

Class Selector

The class selector uses the HTML class attribute. It finds elements with the specific class. To find elements with a specific class, write the selector with a period character (.) followed by the name of the class.

[code language=”css”] .my_class {
text-align: center;
color: red;
}
[/code]

In the example above, text of all HTML elements, whether it is

or

or

, with the class=”my_class” will be center-aligned with font color red.

Also you can also specify that only specific HTML elements should be affected by a class.

In the example below, all paragraph elements

with class=”my_class” will be center-aligned with font color red. So if a

with the class=”my_class” will not be affected by this rule.

[code language=”css”] p.my_class {
text-align: center;
color: red;
}
[/code]

Grouped Selector

In style sheets there are often elements with the same style. For example if the both paragraphs

and headings

needed to be center aligned with font color red, how would you write it. You can write it separately as below.

[code language=”css”] p {
text-align: center;
color: red;
}
h1 {
text-align: center;
color: red;
}[/code]

Also you can write the same this by grouping both the elements as below.

[code language=”css”] p,h1 {
text-align: center;
color: red;
}[/code]

To minimize the code, you can group selectors. To create group selectors, separate each selector with a comma. Not only elements, you can add and mix ids and classes into this too.


In this section we dig deep into selectors of CSS. Different types it can have. In the next section we will look at several kinds of style sheets that you can insert into a HTML document.

WHAT’S NEXT?

Let’s look at how to Insert CSS on HTML.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

1 Comment on "Types of CSS Selectors"

Notify of
avatar
Sort by:   newest | oldest | most voted
Jesse Molnar
Guest

Hello there! Would you mind if I share your blog siote with mmy twitter team?

There’s a great deal of individuals that I assume would really enjoy your content.
Please let me know. Many thanks.

wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW