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.