What is a CSS selector?

Question

What is a CSS selector?

Answer

CSS selectors are used to target HTML elements for styling. There are many different types of selectors, several of which were covered in the last lesson. If you have been going through this course sequentially, the selectors you have learned about thus far are:

  1. id selectors
  2. class selectors
  3. descendant selectors
  4. chained or qualified selectors
17 Likes

2 posts were split to a new topic: Sn’t the first one we learned “tag name selector”?

Hello fellow community i do have inquiries in regards to the selectors.
Are all these 4 selectors important and should i always use them when styling my HTML, am having a hard time figuring out this

The 4 selectors so far are in indeed important ,but there is no “always” when styling your code.

Look at it this way.
you have a <p> tag with the class = "firstparagraph" , Now you can actually style your paragraph
using :
p { }

But whatever you put inside those curly braces {} would affect all your

elements.
Now what if you just want to style that specific paragraph? That’s when a class selector comes in ( you can use the firstparagraph class to style that one paragraph and anything else with the same class).

This is just one of the many examples that I could use. That said, while some of the selectors might not be necessary for you, They in fact help and make your work alot better and easier.

The most important selector of all has been omitted from the list in the opening post… type selector from which we also derive the pseudo element selector.

If we remove the first two items from the list given in the OP we could not utilize the other two: No. 3 without an element (type) selector, and in No. 4 type selectors cannot be chained.

Tracing back in history to the 1980s we might find that element and selector are actually synonymous terms. An element is a selector and vice-versa in this respect.

<p> => tag => element => type => selector

We can traverse the entire document without using id or class just by knowing a type.

p {/*
    property: value;
*/}

We refer to this as a generic type selector rule.

It’s ‘generic’ because it is pervasive and the rule applies globally; ‘type’ because it refers to a native HTML element; and, ‘selector rule’ because it is selectively declarative.


The number 3 item in the list is one of a group of combinators, very useful selector specifiers.

Combinators - Learn web development | MDN

We see from the above that these don’t come up at the beginning so will stop here.

6 Likes

We also learned about tag (type) selectors

2 Likes

what are qualified selectors? and are they covered in the codecademy css course?

/* chained selector - anchor has a class */
a.chained  

/* qualified selector - anchor has a child */
a < img

The qualified selector is not selecting the img, but any anchor that contains an img.


Found this…

https://shauninman.com/archive/2008/05/05/css_qualified_selectors

2 Likes