CSS Selector Explained


(this I understand) In the example above, the property is color and the value is blue . The property and value are separated by a colon ( : ). A semicolon ( ; ) should always be used at the end of a declaration.

(struggling with this part)Finally, the entire snippet of code in the example above is known as a CSS rule or rule set . A CSS rule consists of the selector (here, h1 ) and all declarations inside of the selector.

What is a selector?

That is clearly a typo. It should have read,

A CSS rule consists of the selector (here, h1 ) and all declarations inside of the declaration block.

Think in terms of objects with tags hanging off them. The tag may be a type, a class, an id, an attribute, or a text node of any of the above. All the pertinent information is on the tags that hang from that object.

In this case, the object is an HTML element. It has a type tag hanging from it, h1, at the very least, else it wouldn’t be an element.

selector {
    property: value;    /* declaration */

The entirety of the above is a selector rule or selector rule set (ruleset). Whatever. It is one or more rules that apply specifically to that selector.

The {} is the declaration block. It contains all the property-value pairs that apply to this selector rule.

Bottom line, when you think selector, think element or some part thereof.

We can, as mentioned above delve deeper into an object and select only those objects with the given attribute or attribute value. class and id are two such, but there are many more which we likely won’t get to explore in this course purely because of all the overhead. Stick to core concepts and don’t get derailed during this process. No jumping ahead until you are comfortable and competent at this level.

1 Like

If you’re going to study CSS (or javascript), consider the documentation from MDN.
It’s accurate and quite beginner-friendly as far as documentation goes.

1 Like

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.