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:-
1.Basic Selectors
2.Grouping Selectors
3.Combinators
4.Pseudo
Basic Selectors:-
Basic selectors are consist of universal, id, class, attribute and type selector.
Universal Selector:-
Universal selector is used to Selects all the elements on the pages.
Syntax
*
Html
Output
Id Selector:-
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.
Syntax
#idname
Html
Output
Class Selector:-
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.
Syntax
.classname
Html
Output
Attribute Selector:-
Attribute selector is used to selects the HTML elements that have a specific attribute or attribute with a specified value.
Syntax
[attribute]/ [attribute=value]
Html
Output
Type Selector:-
Type selector is used to selecting the particular element type.
Syntax
elementname
Html
Output
Grouping Selector:-
Selector List:-
Selector list is used to apply the same styles on different elements by using a comma. It is used to minimize the code.
Syntax
A, B
Html
Output
Combinators:-
Combinators are consist of Descendant, Child, General sibling, Adjacent sibling and Column combinator.
Descendant Combinator:-
A descendant combinator(space) is used to select the child element of a particular tag at any level.
Syntax
A B
Html
Output
Child combinator:-
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.
Syntax
A > B
Html
Output
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.
Syntax
A + B
Html
Output
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.
Syntax
A ~ B
Html
Output
Pseudo:-
Pseudo is consist of pseudo classes and pseudo elements.
Pseudo-Classes:-
Pseudo-classes is used to define a special state of an element.
Syntax
elementname:specialstatename
Html
Output
Pseudo-Elements:-
Pseudo-elements are used to style specified parts of an element.
Syntax
elementname::specifiedpart
Html
Output
Conclusion
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)