HTML CSS element selectors

HTML CSS element selectors

HTML CSS element selectors are very common while traversing through a DOM structure of a webpage. Without element selectors your webpage would become half paralyzed. No matter whether you use JQuery, JavaScript or CSS; element selectors play a vital role when you target a particular element or even a batch.

Element selectors – ids and classes denote a certain batch of elements in the DOM or even individual ones. It’s like giving names to the elements in the webpage. Whenever you want a specific property or action to be allotted to an element or a group of elements, you just need to regard them using the appropriate selector.

Element selectors – ids and classes

There are two types of selectors – ids and classes. Ids are particular names given to individual elements. These are unique names and are allotted to just a single element. Multiple elements in the DOM cannot have the same id. This is against general coding guidelines. Even though this will not produce fatal errors; you would get warnings and obviously it is bad coding technique.

For selecting multiple elements which need to have the same attribute, class selector is the option. The class element selectors allow multiple elements to have a common keyword and when put in use, all such elements behave similarly with common attributes.

Other than these, there are loads of other different types of CSS selectors. Check it out at the W3Schools tutorial link.

Element selectors with element type declarations

Another common method of using element selectors is by mentioning the type of DOM element they are. So, for example, if you want all input elements to have the same color just declare as follows –

input{
color : red;
}

This will ensure that all input elements have color red for the text inside them. Now, if you want this property set only for text inputs; you can do that as well. Just write as follows –

input[type=”text”]{
color: red;
}

These are common methods of selecting DOM elements as a batch. In this way, you can exempt declaration of classes or ids for some elements at least. For example, all input elements can be selected in this manner without giving specific ids or classes to them.
This becomes especially helpful when declaring common styles and JavaScript validation techniques.

For example, you can validate all input boxes whether they have characters more than zero or not as soon as they lose focus with the following code. Thus without using any class or id –

$(‘input’).blur(function(){
if($(this).val() > 0){
alert(‘Input found’);
}
else{
alert(‘No input’);
}
});

Element selectors, play a vital role when you need specific attributes distributed all over your webpage. This tutorial must have given you a lot of basics about elements selectors. For more detailed information you can try out CSS tutorials on several other great blogs on the internet. I personally would suggest CSS-tricks as the best. Get going then. Best of luck!