CSS Selectors

I’m not going to explain everything of CSS. Just focusing on the things that are required most of the time while you are dealing with CSS.

The most important thing of CSS is CSS selectors. Let’s begin with an example. Suppose you have 2 paragraphs:

a. My name is X

b. I’m a web developer

HTML code of above paragraphs:

We want to color first paragraph with red and second paragraph with blue. How do you do this?

If you write the following style, it will color (red) all paragraphs.

In above code, p is a selector. Here p means that, all paragraph tags i.e. everything inside <p></p>

So, now you know what is selector. If not yet, let me know. There are 3 main types of selector:

1. Tag selector

2. ID selector

3. Class selector

Tag Selector (body, p, div, strong):

Tag selector means, all the html tags that we use in our html document. e.g. body, p, div, strong, etc can be used as CSS selector.

  • When you write html tag as CSS selector, you don’t put any # or . or < or any other character at the beginning or end of the tag. Just the tag itself.

Some examples of Tag selector are:

 ID selector (#first, #second): 

Suppose you are in a class room. You have a student id or roll number or any other unique id. It is unique, because, nobody has the same student id as yours. The same way, ID selector is unique to only one element of the html file. You can’t use same ID in more than one html element. If you do, then it will conflict.

We’ll use this selector to identify 2 paragraphs and give them 2 different colors. So, first we’ve to change our html code:

Now, let’s write CSS style so that texts of 2 paragraphs will have 2 different colors:

  •  To define a ID selector in HTML, use id=”your ID name”
  • To use that ID in CSS style, use # followed by your ID name. That is, #first, #second etc

Class Selector

Class selector of CSS is similar to real world class. If you are now in a room of class VII (7), then in the same  room, all other students belong to same class VII, except your teacher. If your teacher’s name is MR Y, then all other student’s teacher is MR Y. In other words, class means group. Same group.

Let’s take another example of 5 paragraphs:

1. I’m MR X

2. My Age is 25

3. I’m a web developer

4.  My hobby is watching movies

5. I’ve many friends.

If you want to use red color to paragraphs: 1, 4 and 5; Paragraphs 2, 3 with blue – how would you do this?

Of course, you can use ID selector, but if there were hundreds or may be thousands paragraphs – then?

Here the class selector of css comes to work.

define 2 CLASS selectors .red and .blue in your CSS style:

Now, where ever you use red class to your html element, it’s text color will be red.

  • To define a class selector in your HTML element use: class=red or class=blue
  • To define a class in your CSS style use . followed by your class name. e.g. .red, .blue etc.

Finally let’s use red color to paragraphs: 1, 4 and 5; And paragraphs 2 and 3 with blue:

Short note:

Remember 3 selectors: Tag, ID, Class

Tag: html, body, p, div etc without any # or .

ID: #first, #sidebar etc

Class: .main-color, .sub-color, .title-color