# A Guide to Selectors in CSS Hey Coders! In this article, we will discuss CSS (Cascading Style Sheets) and the selectors used in CSS. ## What is CSS? CSS is neither a programming language nor a markup language. It's a style sheet language. A style sheet language's only purpose is to style the markup language like HTML or XML. We can style a web page by selectively styling all the HTML elements. For example, the CSS code for selecting the h1 tag and changing its color to blue would be 👇 ``` h1 { color: blue; } ``` In the above example, the `h1` is a **Selector**. A selector is the name of the HTML element that we want to style. The line `color: blue;` is called **Declaration** in which, the `color` is the name of the **property** that we want to change and `blue` is the **property value**. ## Selectors in CSS Selectors are basically used to show the browser exactly what elements of HTML we want to target and style it. Following are the different kinds of selectors that are used in CSS. ### Universal Selector The Universal selector (`*`) simply targets all the HTML elements that are present inside the body tag. For example, ``` * { margin: 0; padding: 0; } ``` The above code removes the default margin and padding of all the elements. ### Individual Selector These are also known as Element Selectors. The individual selector is used when we want to target an individual or specific element. For example, ### Class and id Selector The class and id selector will target the elements in which that particular class or id is specified. While using the class selector, type a period (`.`) and then the name of the class. For example, `.class-name {...}`. And for the id selector, type hash (`#`), followed by the name of the id. For example, `#id-name: {...}`. An example of class and id selector is given below. ### And Selector (Chained selector) We can use more than one simple selector in CSS while using selectors. In chained selector, we combine two or more selectors. In the example given below, we used the chained selector `.section.header` which targets the element which has both the classes `.section` and `.header`. ### Combined Selector We use combined selectors when we want to apply the same styling to multiple elements. The selector names are separated by a comma (`,`). ### Descendant Selector In the descendant selector, multiple selector names are used. The first selector name is for the parent element and the selector names following are for its descendant or child element. For example, the selector `div h3 {...}` targets the `h3`element which is inside the `div` tag. ### Child Selector Child Selector, as the name indicates, targets the direct child of an element. The first selector name is for the parent element which is followed by a `>` and then the child element which we want to style. For example, ### Sibling Selectors There are two sibling selectors. The first one is called *Adjacent Sibling Selector*. In this selector, the two selector names are separated by a `+`. This targets the element mentioned after the `+` and is directly after the first selector name. Only one element gets styled. The second sibling selector is called *General Sibling Selector*. In this, the selector names have `~` in between. This targets all the elements of the second selector name which are next to the element of the first selector name. Below is an example to help you understand more clearly. ### Pseudo Selectors Pseudo Selectors are selectors that allow you to style a specific part of a particular element. Some of the pseudo-selectors are below. #### ::before The before keyword lets you add content before a selected element. For example, #### ::after Similar to `::before`, the after keyword allows you to add and style content after the selected element. #### :hover The styling of the selected element used with *hover* will only be visible when the cursor of the mouse hovers over that element. Below is an example. So that's it for this article. Thanks for reading :)