CSS Selectors{Laymen's Guide}

The Vital Role of CSS Selectors

PRAVEEN ALLURI's photo
PRAVEEN ALLURI
·Jul 18, 2022·

5 min read

CSS Selectors{Laymen's Guide}

What is a CSS selector?

A CSS Rule starts with a CSS selector. It's a set of phrases and patterns that instruct the browser which HTML elements should be chosen so that the rule's CSS property values can be applied to them.

Types of Selectors

There are several types of CSS selectors out there. We are only discussing the most used and crucial ones. These selectors can also be used to find creative ways to make your CSS work better and sometimes code a little bit less.

  • Universal Selector

This selector starts with an Asterix symbol(*), which says to select everything literally. If I code the background color with red, it changes the background of every single element, body, DIV, SPAN, or UL/LI. Every single thing is going to have red as a background color. you can observe that in the below image

Background Color.png

This one is ideal for making significant changes to your entire page, such as changing box sizes or deleting margins, but it is rarely used for other purposes.

  • Type Selector

Suppose we want only to select specific elements. We can use the “type selector,” which will choose element types. For example, we could say that if we type out the DIV element, and now our div is red. We can mention Li, and now all of our LIs will be red or span, and our spans will be red. So we can select individual elements based on the element's type established on that tag we specified in the HTML.

Screenshot 2022-07-18 at 6.55.11 pm.png

Since it is effortless to unintentionally apply styles to elements you don't intend to do so, I advise against ever using this form of the selector. The only time I'd ever use the type selector is if I needed to specify some default styles that would be applied to my entire website, like changing the font size for heading tags or choosing the body tag to eliminate margins.

- Class Selector

Now the next type we can use is a “class selector,” so a class selector works by putting a period(.). Then you type in whatever you want that's going to be your class name so that we could say, for example, 'partypooper' is going to a class name, and if we save, you'll notice nothing is red, and that's because you need to apply classes to your HTML. I can come down here and say that our class will be equal to "partypooper," and now Praveen is red.

Screenshot 2022-07-18 at 7.24.16 pm.png

  • ID Selector

Another type of selector will be the “ID selector” it's very similar to the class selector, but you start with the# and then type in the ID you want. Although there are a few changes, they are relatively similar to class selectors in that you may define ids on HTML components and then reference them in CSS.

The first significant distinction is that since an id in HTML is unique, no two items on the same page can have the same id. As a result, id selectors cannot be shared between elements on the same page.

Additionally, id selectors are more specialized, which causes them to override any other CSS styles you do not want.

Screenshot 2022-07-18 at 7.56.01 pm.png

One important thing to note is that if you use ID selectors, you can only have one id on a page, so an ID selector is generally something you don't want to use because you're going only to have one on a page. It's particular, and it's generally not too helpful.

  • Combination Selectors

Suppose you want to combine different selectors, well! That's easy. All you need to do is put these selectors together. You must be familiar with six key combination selectors to consistently choose the specific piece you want.

Screenshot 2022-07-18 at 8.55.47 pm.png

  • OR Selector

The {or}, {and} selectors. OR selector is our first category of combination selector. As a technique to build a CSS selector that will choose components that match at least one of the selections, the {or} selector is the first thing we'll discuss.

Screenshot 2022-07-18 at 8.25.57 pm.png

Now, all you have to do to utilize a {or} selector is space two selectors apart.

  • Direct child selector

The direct child selector is used to pick child elements similarly to the descendant selector, with the primary distinction being that it will only choose items that are the first parent's direct children.

Screenshot 2022-07-18 at 9.07.54 pm.png

Include a greater than symbol between the first and second selectors to utilize a direct child selector.

  • General Sibling Selector

The purpose of this selector, which is all about choosing siblings, is a dizzy concept. Let's look at an illustration so that I can explain what I mean.

Screenshot 2022-07-18 at 9.41.47 pm.png

Since this selector is referred to as the general sibling selector, you may assume it would choose all elements that are the first element's siblings. Still, it only selects the siblings that follow after the first selection. This is so that elements that appear before other elements can't be modified because CSS can only read in one direction. Check the below image.

Screenshot 2022-07-18 at 9.34.57 pm.png

  • Adjacent Sibling selector

The adjacent sibling selector works similarly to the general sibling selector to choose siblings, except it can only select the element immediately following the initial element.

Screenshot 2022-07-18 at 9.50.04 pm.png

  • AND selector

The {AND} selector, the last combo selector, is arguably the most popular. You can use this selector to create CSS selectors that need elements to match the supplied selectors.

Screenshot 2022-07-18 at 10.10.44 pm.png

In the example above, only the (LI) with the class of (partypooper) is chosen. Because all the selectors must be written next to one another with no space in between, using the {AND selector} is also straightforward.

Many other selectors are there, like Pseudo Element Selectors, Pseudo Class Selectors, and Attribute Selectors. You only need to be familiar with the few selectors described above to develop good CSS, even though CSS selectors are robust and diverse in their usage. I will try to cover them in my next article.

Watch out for the space. More stuff is incoming. Till then, Peace Dawg ✌️

### References

huge information related any CSS challenges

A fantastic site by Kevin Powell, with articles covering modern CSS solutions to old CSS problems.

Did you find this article valuable?

Support PRAVEEN ALLURI by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this