## Do you know that selectors are the most important part of CSS? When we talk about CSS, most people will say or think that we know that yes, of course you know, but there is a catch: knowing the styling of HTML content is not only CSS. Let me explain. You might know how to style a webpage, and that's great, but when it comes to professionalism or advanced things, CSS selectors come into play. If you know how to select that particular element, then you can definitely do something out of the box. ##Types of selectors: There are many types of selectors, but we will cover the most popular and widely used in industry. So let's get started! ###1. Universal selector As its name suggests, "universal" means it will select all the elements on a webpage and apply CSS to all of them. It is also widely used in industries. _Syntax_: ``` *{ styling } ``` example: This will remove the default padding and margin from the whole webpage. ``` *{ padding:0px; margin:0px; } ``` ###2. Element Selector We are all familiar with HTML tags, right? When we need to select an element, or we can say an HTML tag, we use the element selector. It can be any element of HTML, but if we select an element, it will apply to all elements present on the page. Suppose we select a `

` tag and apply some CSS to it, then it will be applied to all the `

` tags in the code. _Syntax_: ``` element{ styling } ``` Example: ``` h1 { color: #1a047d; background-color: #949494; } ``` **One more thing: always write the colour in hex code format so that the website will look the same in every browser.** ###3. Class selector We'll be using the class selector most of the time to select the class and play with it. To select a class in CSS, we have to use `.` before a class name, and it is good practice to reuse the classes in HTML to avoid repeating code. _Syntax_: ``` .class_name{ Your CSS } ``` Example: `btn` is the name of the class ``` .btn{ color: #eae8f1; background-color: #f38b8b; } ``` ###4. ID selector There are some times we are only required to style a unique element in these types if case `ID ` comes into the picture. It allows us to style and select the element using ID, and we have to use `#` before mentioning ID. _Syntax_: ``` #ID_name{ styling } ``` Example: `school` is the name of the ID ``` #school{ margin: 0; padding: 0; } ``` ###5. AND selector or chained selector This selector is interesting. Supposing somebody said, "I want a cup of coffee and bread," what would you give him? Both right? same in this case of the AND selector, it will select the element only if it satisfies all the conditions. Let's understand with an example. This is a code snippet we'll be working on. ```

Home
Services
About Us
Contact Us

``` In this case, suppose we have to target the 'li', which has the class `text-orange` and ID 'bg-black'. This condition will only satisfy if a `li` has a class named `text-orange` and an ID named `bg-black`. _Syntax_: ``` .class1.class2{ styling } ``` Example: ``` li.text-orange#bg-black { background-color: #cbf8cb; color: #0000ff; } ``` _Output_: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i1n073um9meehlzg57sm.png) ###6. Combined selector When we have to target more than one element, we use the grouping selector. We can use it to select multiple elements, like two or more classes, IDs, elements, or a mixture of those. Let us understand it by example. _Syntax_: ``` class_name, ID_name, element{ styling } ``` Example: ``` .text-orange, #bg-black, h2 { color: #720000; background-color: antiquewhite; } ``` _Output_: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jlafy3kiedlpkg4eop1.png) ###7.Inside an element selector Sometimes there might be a scenario where you have to target a specific element that is inside another element. In this case, we use the inside element selector. It's very simple; we just have to put space between those elements. _Syntax_: ``` element1 element2 element3{ } ``` Example: ``` nav ul li { color: blueviolet; background-color: #4f3636; } ``` In this case it will search for a `nav` and then `ul` and finally `li` _Output_: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgcazy98z5yx9cermoiw.png) ###8. Direct child selector This is useful to select the direct child element. Let me explain: suppose we have to select a particular element that is inside some elements. In this case, we use the direct child selector. Let us understand it with the help of an example. _Syntax_: ``` element1 >element2 >element3{ } ``` Example: ``` div > span { color: #ffff00; background-color: #fe8223; } ``` Output: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/676rhgtv2hthgvcahfro.png) ###9.Siblings There are two types of siblings: direct siblings and adjacent siblings. We can target direct siblings with `+` and adjacent siblings with `~`. _Syntax_: ``` element1 + element2{ styling } ``` Example: ``` h3 + p { color: #fe8223; background-color: #4f3636; } ``` Output: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42o56e6ymo7fpl7c2rgo.png) _Adjacent sibling Syntax_: ``` element1 ~ element2{ styling } ``` Example: ``` h3 ~ li { color: #27fe23; background-color: #201f1f; } ``` ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odmbtpz3ztks9s7mebn2.png) ## Pseudo-elements Some people find the pseudo element a little tricky, but no worries, I'm here to help you out. There are many pseudo-elements, but as of now, we'll cover only `::before` and `::after` pseudo elements.Let me explain that a pseudo-element is a keyword that is added to a selector and lets you style a specific part of the selected element. ### ::Before keyword _Syntax_: ``` selector::pseudo-element { property: value; } ``` Example: When we use `::before` It will add the style before the selected element. In this case, we have added "🔗"before the `` tag. ``` a::before { content: "🔗"; display: inline-block; } ``` _Output_: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3grra646asibammpv4r.png) ### ::After keyword If we use `::after` It will add the style after the selected element. In this case, we have added "🔗"after the `` tag. ``` a::after{ content: "🔗"; display: inline-block; } ``` _Output_: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m043j7rev96wxx8de7o9.png) Easy peasy, right? That's for today. I'll catch you in the next article with some interesting topics.

faessalsufi24

Beyond the Basics: CSS Selectors Unleashed

Join Our Newsletter. No Spam, Only the good stuff.