Lesson 12 Final Exam Project

The element type is used to create the selector. This is HTML elements for HTML documents.

section {}

Multiple element selectors are comma separated in the CSS.

html, body {}

The custom class name used in the HTML is targeted within CSS. The class name selector must start with a period in CSS.

.protips {}

The custom ID name used in the HTML is targeted within CSS. The ID name selector must start with a hashtag in CSS.

#red-warning {}

The universal selector selects everything on the page when used alone. It can also be used with an element to select all that element's children.

* {}

Pseudo-elements are also used to target components that do not exist in the document tree. These can also be used to create an element that refers to content not in the document tree. A double colon is required for these selectors, and they cannot be stacked.

p::first-line
p::first-letter
a::before
a::after

These allow you to target a component using its attribute. To use it, two to three components are needed: the attribute selector must be in square brackets, the targeted attribute needs to be added, and, optionally, the value of the targeted attribute needs to be added between quotes and after an equal sign. It also needs to be attached to another selector, typically a type selector, without any space or comma in between. The universal selector can also be used to indicate any element with that attribute.

h2[title]
span[lang="fr"]
*[class~="author"]
p[lang|="en"]
a[href^="https"]
p[lang$="GB"]
a[href*="http"]

These are used to target elements based on their relationships to other elements. The symbols used for these include whitespace - to target a descendant, asterisk - to target a grandchild or later, greater-than - to target a child, plus - to target the next-sibling that shares a common parent element and that the second selector comes immediately after the first selector in the document tree, and a tilde - to target a subsequent sibling that shares a common parent element and the second selector follows but not necessarily right after the first selector in the document tree.

ul li
h2 * li
p > ul
p + p
p ~ p

Pseudo-class selectors allow you to target components that do not exist in the document tree. These include the dynamic set, which indicate whether a link was visited, the UI element states, which include if a box is checked, negation, which includes targeting everything except for one thing, structural sets, which allows you to target elements based on the structure of the document, specific children or siblings, for example. A single colon is used with these selectors, and they can be stacked, for example, :focus:hover.

:link
:visited
:hover
:active
:focus
:enabled
:disabled
:checked
:not(p)
:root
tr:nth-child(odd)
tr:nth-last-child(3n)
p:first-child
img:last-child
p:only-child
img:nth-of-type(2n+1)
p:nth-last-of-type(4n)
dl dt:first-of-type
ol li:last-of-type
h2:only-child