/* Tag. */
p { ... }
/* Id. */
#wt-wish-list { ... }
/* Class. */
.wt-wish { ... }
/* Multiple criteria: Tag with a specific class. */
p.wt-bold { ... }
/* Factorization: Apply same style to multiple selectors. */
p, #wt-wish-list, .wt-wish { ... }
/* Child element: Apply style to every button which is contained in an element with a "wt-button-container" class. */
.wt-button-container button { ... }
/* Direct child element. */
.wt-button-container > button { ... }
/* Pseudo-classes. */
.wt-button-container:hover { ... }
.wt-button-container:first-child { ... }
Prefer using class-based selectors.
To avoid collisions and improve readability, add a prefix to your CSS classes.
Especially if you are not using a framework and that your CSS is global (and not specific to some component).
Pseudo-classes
Pseudo-classes allow you to customize the CSS depending on the context or state of the element(e.g.: is it the first element of a list, is it a checked checkbox etc...).
