CSS Selectors

Each rule in a CSS file consists of a “selector” expression which is used to determine which elements in the HTML will be affected by the style rule. Selectors can be very basic or quite complex with how they target.

Since we are following the design principle of avoiding unnecessary features and only targeting the class attribute for elements it means we can focus on a much smaller subset of CSS selectors.

We can also target individual elements using”

Here are a few examples, the first one changes the font family of all the text in the page to be Arial (or others if Arial is not present) (see CSS font families)

.MAIN * means apply this rule to every element which is a child of the tag recursively with the class “MAIN” present. One typically might apply that to the body tag.

We can make other targets with our selectors like targeting heading elements under an element with .MAIN:

The .MAIN > h1 selector only selects h1 tags which are direct children of the tag which has the class MAIN.

So the difference between:

• .MAIN > * - this only selects direct children

• .MAIN * - this selects all children - N levels down

Those are the most useful selectors. There are some others to do with Nth child, and some to do with hover settings for mouse etc. Google them when you need them.