We know styling is influential for developers to represent their work. Styling is as we add spices to vegetables to bring out the flavour of the vegetables. For styling "CSS selectors" are essential. So, what is CSS selectors? CSS selectors define the elements to which a set of CSS rules apply.
There are a few CSS selectors in CSS:-
Basic selectors are consist of universal, id, class, attribute and type selector.
Universal selector is used to Selects all the elements on the pages.
Id selector is used to selecting the id attribute of an HTML element. That is written with "#" symbol followed by the id of the element. There should be only one element with a given ID in a document.
The class selector is used to selecting the class attribute of an HTML element. That is written with " ." symbol followed by the class of the element.
Attribute selector is used to selects the HTML elements that have a specific attribute or attribute with a specified value.
Type selector is used to selecting the particular element type.
Selector list is used to apply the same styles on different elements by using a comma. It is used to minimize the code.
Combinators are consist of Descendant, Child, General sibling, Adjacent sibling and Column combinator.
A descendant combinator(space) is used to select the child element of a particular tag at any level.
Child combinator(>) is used to select the first element of a particular tag. But if you wrap with different tag then it is not applied the style on it.
A > B
Adjacent Sibling Combinator:-
Adjacent sibling combinator(+) is used to select the adjacent sibling of an element. It is used to select only those elements which immediately follow the same parent.
A + B
General Sibling Combinator:-
General sibling combinator(~) allows elements to be selected based on their sibling elements, those which share the same common parent. In this not necessary element immediately follow.
A ~ B
Pseudo is consist of pseudo classes and pseudo elements.
Pseudo-classes is used to define a special state of an element.
Pseudo-elements are used to style specified parts of an element.
In this article, I cover CSS Selectors. I also define the syntax, purpose and usage at one place.
I hope this article help to learn CSS Selectors.
Top comments (0)