1. CSS Functions
CSS functions are special values that execute a computation or reference an external resource.
A. The url() Function
This is essential for linking external files, most commonly used with background images.
.hero-section {
/* Links an image file relative to the location of the CSS stylesheet */
background-image: url('../images/hero-bg.jpg');
background-size: cover;
}
B. The calc() Function
The calc() function allows you to perform basic math operations (addition, subtraction, multiplication, division) to dynamically determine CSS property values. This is invaluable for combining different units.
Note: Spaces around the
+and-operators are mandatory withincalc().
/* Sets the element width to 100% minus a fixed 40px padding */
.sidebar {
width: calc(100% - 40px);
}
/* Calculates font size based on viewport width (vw) plus a fixed minimum (px) */
h1 {
font-size: calc(2rem + 2vw);
}
C. Color Functions (RGBA, HSL)
As covered in P1.4, these are functions that calculate and return a color value:
rgba(0, 0, 0, 0.5)hsl(200, 50%, 50%)
2. Pseudo-Classes
Pseudo-Classes are used to select elements that are in a specific state or that fulfill a specific condition relative to other elements. They are appended to a selector with a single colon (:).
| Category | Pseudo-Class | Purpose | Example |
| User Action | :hover | Styles the element when the mouse cursor is over it. | a:hover { color: red; } |
:active | Styles the element while it is being clicked (held down). | button:active { transform: scale(0.98); } | |
:focus | Styles the element when it has focus (e.g., when tabbing to a form field). | input:focus { border: 2px solid blue; } | |
| Link Status | :link | Styles an unvisited link. | a:link { color: blue; } |
:visited | Styles a link that has been visited by the user. | a:visited { color: purple; } | |
| Structural | :first-child | Styles the element if it is the first child inside its parent. | ul li:first-child { font-weight: bold; } |
:last-child | Styles the element if it is the last child inside its parent. | ul li:last-child { margin-bottom: 0; } | |
:nth-child(n) | Styles the element that is the $n^{th}$ child inside its parent. $n$ can be a number, a keyword, or an expression. | li:nth-child(2n) { background: #eee; } | |
| Form State | :checked | Styles checked radio buttons or checkboxes. | input:checked + label { color: green; } |
:disabled | Styles disabled form fields. | input:disabled { opacity: 0.5; } |
A. Using Structural Pseudo-Classes (:nth-child)
The :nth-child() function is incredibly powerful for advanced list styling:
li:nth-child(odd)orli:nth-child(2n+1): Targets odd-numbered list items.li:nth-child(even)orli:nth-child(2n): Targets even-numbered list items (often used for zebra-striping tables/lists).li:nth-child(4): Targets the fourth list item only.
3. Pseudo-Elements (Brief Introduction)
Pseudo-Elements are used to style a specific part of an element. They are appended to a selector with a double colon (::).
::beforeand::after: Inserts and styles generated content immediately before or after the element’s actual content. This generated content must be defined using thecontentproperty.
/* Creates a small red square before the content of the element */
.callout::before {
content: '👉'; /* Required property */
margin-right: 5px;
color: red;
}
