CSS Selector types | Class & ID Selector Syntax

In the previous post we have talked about a brief history of CSS development. We described how the CSS is developed over the years.

Now we are going to discuss the CSS selector types. The CSS selector types are used to style elements of an HTML page. CSS selectors allow us to style an element individually or style multiple elements on an HTML page. Let us start describing the CSS selector types in more detail.

Naming Conventions for Class & ID Selectors

You should keep in mind the following naming conventions for the IDs and classes in CSS.

  • Avoid using whitespaces or any special characters.
  • CSS is case-sensitive so be care full when using CSS IDs and Classes.
  • Try to establish some kind of standards for your CSS and stay consistent with them.

Html Element Selector | Global Selectors

These elements are used to style all elements of the type in a styled document. It means when you have written a style as below:

p {color: gray;}

This style will be applied to all the <p> tags present on the page where the CSS style is present. It will turn the text of all <p> tags in the document. This technique is used to style HTML elements like <h1>, <p>, <a> etc. (See HTML tag List).

h2 {color: #eee; font-size: 24px;}

a {color: blue;text-decoration: none}

CSS Class Selector Syntax

The class selector is one of the mostly used CSS selector type. It is an HTML attribute that can be applied to every HTML element. You can use it to style a single or multiple HTML elements in a styled document. It is usually used to style multiple elements in a document. You can set a name for the class and use as many times and on as many elements as you like to style them similarly. For instance see the following code:

<h2 class=”my_sub_heading”></h2>

And style for the class:

.my_sub_heading{color: red; font-size: 18px;font-weight: bold;}

In the CSS document to declare a class you have to use a dot ( . ) in front of the class name. To apply the class to an element write class=”class_name_without_dot”.

CSS ID Selector Syntax

The Id selector is quite similar to the class selector. The big difference is that the class selector can be applied to many elements on the page but the Id selector should be used once per page. It means that there should not more than one element that has same ID attribute. See the example below to understand more:

<h3 id=”my_id_selector”></h3>

In CSS

#my_id_selector{background-color: gray; font-size:24px;color:green;}

In the above code we are using an Id selector on <h3> hence we should not use this ID selector on any element on this page. To use ID selector write id=”my_id_name” as an attribute of an HTML element. In the CSS document use a Hash or Pound sign before the ID name as we have used in above code.

Element Specific Selectors

We can use modified class or ID selectors which limits application to a specific element in a styled document. See the code below:

h2.my_class{color:red;}

p#my_id{font-size: 24px;}

In the above code we are specifically declaring the my_class class attribute that will be only styling the <h2> element with this class attribute. In the next line we are declaring ID selector my_id on a <p> tag. It will be effective only to a <p> tag with the ID of my_id.

Comments