Attribute selector

1. Element or Group Selector

This is one of the most basic selector to use in CSS. Element selector allows you to select and give styling to all elements with the same specified element name. If there are multiple elements with the same style definitions, you can group all the elements and apply styling to all of them together. This way you can minimize the code because you won’t have to use class for each of the elements....

2. #id selector

id selector is the other most powerful common selector in CSS. Using the # symbol followed by id name allows you to target by id and apply styling to all specified elements with a selected id. Using this selector sounds good because of its simplicity but keep in mind that id should be unique for the entire web page. It means you are not allowed to assign an id selector for multiple elements. If you won’t assign unique id you will face problems in manipulating a specific element in JavaScript. Also, your code will not be validated by W3C and you will face compatibility issues across different browsers. So instead of creating many #id’s use classes or any other logic for styling, else it will be tough to maintain your CSS later on....

3. .class selector

Class selector is the most useful common selector used by the developers. You can define the class selector using period (.) followed by the class name. It gives styling to all elements with a specified class attribute. It is similar to the id selector but the only difference is, class selector allows you to target multiple elements in a page. You can also use multiple classes (separated by a space) on HTML elements....

4. Attribute selector

Using attribute selector, you can select all elements by the name or value of a given attribute and apply styling to them....

5. Descendant selector

Descendant selector apply styling to only those elements that are descendants of a specified element. This selector is very useful when you need to apply styling only for some specific elements. For example, what if, rather than targeting all ‘h2’ tags, you only need to target the ‘h2’ which are the part of ‘div’ tag only. These are the cases where you can use descendant selectors....

6. Child selector

Child selector allows you to selects all elements that are the children of a specified element....

7. Adjacent and general sibling selectors

Adjacent means “immediately following”. This selector is used when you want to select the elements that immediately follow the specified element (adjacent siblings).  In other words it selects the element which is right next to another element at the same level of the hierarchy....

8. The star selector *

It is also called as universal selector (*) and it selects everything in the document and apply styling to them. By default your browser already defines the styling to the element and when you want to reset the browser default styles you can use star selector. For example, instead of using the default styling of your browser such as margin, padding, text-align or font-size, you can define your own styling for the entire elements of your web page.....

9. Pseudo-classes and Pseudo element

If you want to style an element based on the state of a specified element, you can use pseudo classes (:) for that. For example, you can apply styling on an element when a user mouses over it, when a user visit or hover a link when an element gets focus. So this selector is useful to apply styles based on element states. Let’s see the syntax and example....

10. nth-of-type and nth-child

Consider a scenario where you have four unordered lists. If you want to apply CSS only on the third item of the ul, and you don’t have a unique id to hook into, you can use the nth-of-type(n). Basically :nth-of-type selector allows you to select every element that is a specified nth child of a specified type of it parent. n can be any number, keyword, or formula that will specify the position of an element among a group of siblings. If the explanation still sounds complicated then let’s understand with the example....