About me

I am a full stack .net developer with 5 years of experience in front-end and back-end technologies like HTML, CSS, Jquery, Angular, Typescript, Bootstrap, C#, MSSQL and Mongodb. I have done Btech Computer engineering from Sigma Institute of Engineering & Technology that comes under GTU (Gujarat Technological University). I have worked on web applications, Web APIs, Windows Forms, Web Forms, Tray applications and corporate websites. Programming is my hobby and I have starting writing blog to provide a platform for those who want to grow their careers as a fullstack .NET developers.

We are making websites & web apps for you!

Lesson 2 - Part 3 : Selectors - Small but crucial step towards learning CSS

If one has decent understanding of selectors, one can play with the HTML elements through CSS, javascript, JQuery and so on...

What selectors are?
As discussed in the previous lessons, a CSS changes look of an HTML element and javscript makes an HTML element interactive. To do this, the HTML element needs to be selected and this is done by the selector. So, selector is something that chooses an HTML element to be styled or to be made interactive. 

Type of selectors:

1) Simple Selectors
2) Attribute Selectors
3) Pseudo Selectors

A basic HTML element has 2 main attributes, id and class. Both id and classes are defined by us i.e the developers. id is used to make a HTML element unique and class is used to all the elements that belongs to a same category. For example: Consider, below boxes:

Image 2.2.3 Example of Selectors

The HTML code for this can be: <div>1</div><div>2</div><div>3</div><div>4</div> which would render into something like below: 

Image 2.2.4 Browser Output

Next step is to write some css so that this will look like the Image 2.2.3. For that let us give this divisions a class. I am defining class "divBox" for these division. You can name the class anything like Square, divSquare, Box etc. Please go through the W3C naming conventions standards for the  naming standards recommended by the World Wide Web Consortium. 

Now, the modified HTML code would be: <div class="divBox">1</div><div class="divBox">2</div><div class="divBox">3</div><div class="divBox">4</div>

Syntax of CSS: selector{ property: value;}

Now, I can write the below CSS code for these boxes:

Image 2.2.5 CSS properties

A class selector is written as .className. Here the selector will be .divBox. After adding this css, the output will be something like below image:

Image 2.2.6 Output after adding class selector css

Now, to get the final output, the background color of box 2 should be yellow. The box 2 is unique over here so let us give it an id "YellowBox". So, the HTML would be: <div class="divBox">1</div><div class="divBox" id="YellowBox">2</div><div class="divBox">3</div><div class="divBox">4</div>

Image 2.2.7 CSS properties

After adding this css, the output will be as shown in the Image 2.2.3

1) Simple Selectors: The id, class and name (HTML tag itself) selectors comes under the category of simple selectors

2) Pseudo Selectors: Used to style particular state of an HTML element or a particular position of the HTML element

Example: Consider the above example, If we want to change the background color of the div on mouse over, we can do it by the below pseudo selector:

Image 2.2.8 Example of pseudo selector

This will give the below output:
Image 2.2.9 Hover with pseudo selector

As shown in the Image 2.2.9, on hovering any division, the background image will change to grey.

The nth-child pseudo selector

The background color for the second division can also be changed by the nth-child pseudo selector as below:
Image 2.2.10  nth-child selector

nth-child selector is used to select an element based on the position at which it is resides inside the parent element. In the example, we are supposed to change the background color of the division at the second position that's why the selector will be :nth-child(2).

3) Attribute Selector: Used to select the HTML element by their attribute

Consider the above example, the another way to select the division by the attribute is as shown below:

Image 2.2.11 Attribute selector 

The same way id or any attribute can be used to set style of any HTML element.

Subscribe to Be a full stack .NET developer by Email