DEV Community

loading...
Cover image for CSS Selectors for web developer and beginners

CSS Selectors for web developer and beginners

Shilpa
FrontEnd Developer
・3 min read

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

Alt Text
Output
Alt Text

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

Alt Text
Output
Alt Text

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

Alt Text
Output
Alt Text

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

Alt Text
Output
Alt Text

Type Selector:-

Type selector is used to selecting the particular element type.

Syntax

elementname

Html

Alt Text
Output
Alt Text

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

Alt Text
Output
Alt Text

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

Alt Text
Output
Alt Text

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

Alt Text
Output
Alt Text

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

Alt Text
Output
Alt Text

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

Alt Text
Output
Alt Text

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

Alt Text
Output
Alt Text

Pseudo-Elements:-

Pseudo-elements are used to style specified parts of an element.

Syntax

elementname::specifiedpart

Html

Alt Text
Output
Alt Text
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.

Discussion (0)