# CSS Selectors In this article, we will go through the different CSS Selectors and how these selectors help us target and style the contents of our document. Let's get started. CSS Stands for `Cascading Style Sheets.` It is a stylesheet language used to describe a presentation of a document written in HTML. A CSS Selector selects the HTML element you want to style. # Universal Selector The universal selector selects all the HTML elements on the page. The `*` matches elements of any types #### Syntax: ```CSS * { style properties } ``` #### CSS ```CSS * { margin: 0; background-color: #3c77f5; color: #fff; } ``` #### HTML ```HTML ``` #### Output ![article (2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668352415128/ndf5k_-FZ.png align="left") # Individual Selector It selects the individual elements to apply the style separately. ### Syntax: ```CSS element { style properties } ``` #### CSS: ```CSS h1 { color: #dc143c; font-size: 45px; font-family: sans-serif; } p { color: #78ee42; font-size: 20px; font-family: cursive; } button { padding: 10px 20px; font-size: 18px; border-radius: 5px; background-color: #0b3598; } ``` #### HTML ```html

My Name is Shon

I'm a student at iNeuron.
Learning Full Stack Web Development

``` #### Output ![article (3).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668353387027/QLVNAiJB4.png align="left") # Class Selectors The Class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write a dot followed by the class name. ### Syntax: ```CSS .classname {style properties} ``` #### CSS: ```CSS .warning{ color: #dc143c; font-size: 25px; padding: 5px; } ``` Here, `.warning` selects any element that has `class = "warning"` #### HTML ```html ``` #### Output ![article (4).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668354450597/nJJ8dhxbw.png align="left") # Id Selectors Selects an element based on the value of its `id` attribute. The value of `id` should be unique in a document. #### Syntax: ```CSS #idValue {style properties} ``` #### CSS ```CSS #img { width: 350px } ``` Here, `#img` selects the element that has `id = "image"` #### HTML ```HTML image ``` #### Output ![article (5).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668355757820/JMlNpFEfo.png align="left") # Chained Selectors This selects all the elements with both class names within its class attribute. Here both the class names are written without a space in between #### Syntax: ```CSS .classname1.classname2 {style properties} ``` #### CSS ```CSS .bg-red.text-green { background-color: #d41b3a; color: #93e91c; } ``` #### HTML ```HTML ``` #### output ![article.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668351446339/8ygb3kvsj6.png align="left") # Combinator There are four different combinators in CSS - Descendant combinator - Child Combinator - General Sibling Combinator - Adjascent Combinator ### Descendant combinator The descendant selectors can be any selectors having white-space in between the elements or class names without any combinators. It is used to select the child elements of the specified tag #### Syntax ```CSS selector1 selector2 selector3 {style properties} ``` #### CSS ```CSS div ul li{ font-size: 20px; color: #ec2edf; font-family: cursive; text-transform: capitalize; } } ``` #### HTML ```HTML
``` #### Output ![article (6).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668357174361/hRcG6yTT1.png align="left") ### Child Combinator (Direct Child) The child selector selects all elements that are the children of a specified element. In the following example, the selector `div>span` selects only the direct child of the `
` element which is `span-1` and it ignores `span-2` which is its grandchild, and also ignores `span-3` which is outside the `
`. #### Syntax ```CSS selector1 > selector2 {style properties} ``` Here elements matched by the second selector must be the immediate children of the elements matched by the first selector ```CSS span { color: #00ffff; font-size: 20px; } div > span { color:#f5b04f; font-size: 25px; } ``` #### HTML ```HTML
Span -1, in the div. Span -2, in the span that's in the div.
Span -3, not in the div at all. ``` #### Output ![article (7).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668358788443/p1_oCPWz7.png align="left") ### General Sibling Selector The general sibling selector selects all the elements that are the next sibling of a specified element. In the following example, the selector targets all the `

` elements that come after the element with the class name `sibling.` #### Syntax ```CSS former- element ~ target- element {style properties} ``` #### CSS ```CSS .sibling ~ p{ color: #00ffff; } ``` ##### HTML ```HTML

test1

test2

test3

test4

test5

``` #### Output ![article (8).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668361398293/oXi5DU6np.png align="left") ### Adjacent Sibling Selector (+) Adjacent means `immediately following.` The adjacent sibling selector targets an element that is directly after the specific element. The sibling element must have the same parent element. The following example selects the first `

` element that is placed immediately after the element with the class name `sibling` #### Syntax ```CSS former-element + target-element { style properties } ``` #### CSS ```CSS .sibling + p{ color:#ffa500; font-size: 30px; } ``` #### HTML ```HTML

test1

test2

test3

test4

test5

``` #### Output ![article (11).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668372205480/q84uy04Zg.png align="left") # Before Selector The CSS:: before selector is used to insert content before the content of the selected element. In the below example, we are inserting text before the content of the `

` element. #### Syntax ```CSS selector :: before {style properties} ``` ####CSS ```CSS h1::before{ content: "Hello, "; color: #dc143c; } ``` #### HTML ```HTML

I'm Shon

``` #### Output ![article (9).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668367618989/ZnT2nF70H.png align="left") # After Selector The CSS:: after selector is used to insert content before the content of the selected element. In the below example, we are inserting a green dot after the content of the `

` element. #### Syntax ```CSS selector :: after {style properties} ``` #### CSS ```CSS h1::after{ content: " "; width: 25px; height: 25px; border-radius: 50%; background-color: #7fff00; display: inline-block; margin-left: 10px; } ``` #### HTML ```HTML

Thank you

``` #### Output ![article (10).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668369524696/EtvnmLNtf.png align="left") Reference: - MDN Docs - W3 Schools - Live classes @ iNeuron