Basic Selectors

            h1 {
                color: blue;
                background-color: yellow;
            }

            .special {
                color: red;
            }
        

h1 and .special is the selector. It is selecting the h1 element in the html. The element itself can be called the subject of the selector.

type selectors are also called tag selectors or elements selectors. They are the basic sort of selector, like the h1 shown at the top of the page.

class selectors begin with a "." and are case sensitive. An example is the .special selector in the top example.

You can have different elements with the same class name. For example, h1 and p with class "highlight". These are then targeted in the CSS as follows:

        h1.highlight
        p.highlight
        

multiple classes can be applied to elements at the same time. And multiple classes can be selected in the CSS by the same selector:

So maybe this is useful if you have a few "notebox" things and want to have some of them be "danger" and some of them be "warning." But you also want whatever you are doing to the regular "notebox" to still be happening to the "dangers and warnings".

Whatever rule you put in the "notebox" selector gets done to anything with that class, even if you have another selector which is specifying two classes need to be present.

So its kind of like a sub category situation. The blue text is on the "notebox" selector, not the danger or warning, yet it gets applied to all.

The "notebox danger" box has the same size text as the "danger" box below it that doesn't have an outline. That box doesn't have an outline because it is just "danger" not also "notebox" which is where the grey outline is applied. The text is the same size because the "danger" class is set to have x-large text size. This rule then applies to both "danger" and "notebox danger" because "danger is present in both cases.

This strategy of multiple classes therefore let's you target anything with a particular class (if you select based on only one class) or zero in on specific situations where all the classes are present (if you select based on having all the classes.

the id selector uses "id" in the same way "class" is used in an element. Except the id can be used only once per page. It is selected using "#" instead of "." in the CSS.

It also overrides other rule which may apply to that particular element. For example, the below paragrpahs have class=p-class but the yellow one is also id=one. The p-class is set to have large text so both get large text, but the background-color is overridden by the id=one rule.

ID selector id=heading

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

(id=one)Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

        
                h1 {
                color: blue;
                }

                .special {
                color: blue;
                }
            
        

        
                h1,
                .special {
                color: blue;
                }
            
        

this is the class1 p

this is the class2 p

this is the class3 p

The universal selector is "*" and is used to select all elements on the page.

It can be used with descendent combinator, which is just a space, to select everything inside a particular element. For example,

will select everything (*) that is inside of a (p).

Using it on its own as in

results in everything on the page being selected.