CSS Selectors #

(Just throw this stuff into a style.css file)

The thing that indicates what part of a site the CSS gets applied to.

Types #

Element #

for example:

h1 {
    color: purple
}

^ in this case, h1 is the selector. This is an element selector.

Class #

Classes are attributes added to specific html elements. More targetd than element selectors.

For instance, the html might look something like:

<h1 class="some-class">Stuff</h1>

And the corresponding CSS bit that would handle that class selection would be:

.some-class {
    color: purple
}

Mind the . and attribute spelling.

Classes can transcend different html types (i.e., it can apply across h, p, etc. elements)

ID #

ID selector is denoted with a #, followed by the ID name, a specific string.

html would look something like:

<h1 id="someID">Thing</h1>

and the css:

#someID {
    color: purple
}

Difference between class and id selector? By convention, ID selector should only be applied to a single HTML element, whereas class can be applied to multiple.

attribute #

attribute selectors specifies both the HTML element type and a specific attribute (bit different from class selectors).

html might look like:

<p changeme="true"> blah blah </p>

corresponding css:

p[changeme] {
    color: purple
}

In a boolean case, it can also be a bit more expressive:

p[changeme="true"] {
    color: purple
}

or

p[changeme="false"] {
    color: purple
}

Universal #

universal selector is a *, simply selects ALL.

*{
    color: purple
}