CSS class Selector

Last Updated Jul 21, 2015, 12:00:06 PM

CSS class Selector

CSS class selector matches an element based on the contents of the element's class attribute.

The class attribute is defined as a space-separated list of items, and one of those items must match exactly the class name given in the selector.

Imagine, you have 10 elements and you want to apply the same styles to all the 10 elements. Of course, you can give 10 different unique id names and apply the styles. But thats not a good practice!. Why? What if you have 1000? Do you give 1000 names.

That's where the css class selector comes in. What it does is, it applys the same style for any no of elements which comes under the same class.

Syntax Example

If you notice the above code, I put 2 paragraphs and 1 head tag under one class called myclass. And I applied the same style for all the three elements in a single shot.

The CSS class syntax is . Dot symbol followed by the class name

Always remember the class name can not begin with a number

Watch GIF Try It Now

Browser compatibility
Basic support Yes Yes Yes Yes Yes ? ?

CSS Selectors Reference

CSS Selectors Reference

CSS Combinators

Other CSS Selectors you might want to learn

CSS Id Selector

CSS Class Selector

CSS Group Selector

CSS Child Combinator

CSS General Combinator

CSS Adjacent Combinator

Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and W3C Organization

Last Updated Jul 21, 2015, 12:00:06 PM