CSS Selectors for web developer and beginners
Tags: css, html, webdev, beginners
Published: 2021-01-25 23:10:15

---
title: CSS Selectors for web developer and beginners
published: true
description: 
tags: #css #html #webdev #beginners
//cover_image:
---

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](https://dev-to-uploads.s3.amazonaws.com/i/xpm43dm2aod50pz6s7w5.png)
**Output**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h6dgkmm57krwesyyvazj.png)

#### 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](https://dev-to-uploads.s3.amazonaws.com/i/077na5owxcpjeqtkwry3.png)
**Output**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vju0ctrdt9xumy3kfls3.png)

#### 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](https://dev-to-uploads.s3.amazonaws.com/i/belo72cktk66doltnw1m.png)
**Output**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/24pzl72itbqvlwnycq24.png)

#### 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](https://dev-to-uploads.s3.amazonaws.com/i/4hcgg6zy0sspm5xxcdwk.png)
**Output**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bfdzsvmnf5hxfv9qzs2t.png)

#### Type Selector:-
Type selector is used to selecting the particular element type.

**Syntax**

`elementname`

**Html**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n3hi5csi5a98bmez4fzc.png)
**Output**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/auwf2jf4x0e200zm89q4.png)
# 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](https://dev-to-uploads.s3.amazonaws.com/i/71r3ufdasszrulf3kl03.png)
**Output**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lk4ykkd8h8xuo0phb6nb.png)

# 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](https://dev-to-uploads.s3.amazonaws.com/i/wuaq832urbknli1a5dx8.png)
**Output**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k56s3f6l9k1u5degpo5b.png)

#### 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](https://dev-to-uploads.s3.amazonaws.com/i/8dgkwitvmnfwhzwi4dqf.png)
**Output**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ou8jt98g1jnf9l7bhevl.png)

#### 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](https://dev-to-uploads.s3.amazonaws.com/i/ni6v6pyr96k5bh2nqcbq.png)
**Output**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kgolq2uyraah1e3xt4ew.png)

#### 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](https://dev-to-uploads.s3.amazonaws.com/i/idfcq4xug7rh268o3tco.png)
**Output**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nhu127wra2p4kcglbvmx.png)

# 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](https://dev-to-uploads.s3.amazonaws.com/i/002ovyrnz4pnoke5eh34.png)
**Output**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/izmhc9xksung2hs7voa4.gif)

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

**Syntax**

`elementname::specifiedpart`

**Html**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e7tdui81is5vdm0q66vp.png)
**Output**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ocnte7rl4rxk5um8vuv4.png)
**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.