What are CSS Selectors?

Before we begin, let’s brush up on a bit on CSS.
CSS (Cascading Style Sheet), in simple terms, if HTML is the skeleton, then CSS is the muscles and the skin, and JavaScript is the brain.

In general, CSS files are the layout and design for a web page. From the placement of images and text to the font size and background color, CSS controls the way these HTML elements display in a browser.

So with that much intro, I think we’re good to go!

Now… The answer to the question asked in the beginning. What are they actually?

CSS selectors define the elements to which a set of CSS rules apply, in other words selectors are used to target the HTML elements on our web pages that we want to style.

There are 4 major and widely used type of selectors:

• ID selector — Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document.
  Syntax: #idname
  ID selectors are the most powerful type of selector in terms of CSS specificity. Meaning that they beat out other types of selectors and the styles defined within win. That sounds good, but that’s typically considered bad, because it’s nice to have lower-specificity selectors that are easier to override when needed.

• Class selector — Selects all elements that have the given class attribute.
  Syntax: .classname
  Class selectors are your friend. They are probably the most useful and versatile selectors out there. In part because they are well supported in all browsers. In part because you can add multiple classes (just separated by a space) on HTML elements. In part because there are JavaScript things you can do specifically for manipulating classes.

• Tag selector — Selects all elements that match the given tag name.
  Syntax: p,body,a,button
  Tag selectors are at their most useful when changing properties that are unique to that HTML element. Like setting the list-style on a <ul> or tab-size on a <pre>.Don’t rely on them too much though. It’s typically more useful to have a class define styling that you can use on any HTML element.

• Universal selector — Selects all elements.
  Syntax: *
This is not so useful but something to be vary of, it selects every element and applies the CSS to it, hence not very useful when trying to be specific.

Well, that was all of it then!
On the basis of this guide, you can enhance your learning and knowledge about other advanced CSS selectors which aren’t covered in this guide, but aren’t that necessary.

I know you’re feeling glad the guide is over. Keep learning : ) and leave a like!