arvb.net

Pseudo elements

2 min read

Pseudo classes

We can use pseudo classes to refactor CSS code. For example:

nav a:hover,
nav a:focus {
	color: 255,255,255
}

This can be refactored using is:

nav :is(a:hover, a:focus) {
	color: 255, 255, 255
}

Like we we can do:

nav a:link,
nav a:visited {
	color: #000
}
 
nav a:any-link {
	color: #000
}

is / where

We can use :is with any element (for example, we could write :is(header, footer)) to apply styles to that pseudo class. Doing so will have an effect on the specificity of that particular declaration, however.

We can accomplish the same without giving the declaration any specificity by using :where instead.

target

This pseudo class allows us to apply CSS to whatever the current targeted or selected item is. This is accomplished by using the href anchor tags with page links - a href=#item that match the IDs of the element of the target.

Other

We can also select items with specific attributes. For example:

.card img[alt] {
	color: 0,0,0
}

This selects images with .card that also have the alt attribute.

We can also use the not pseudo class, either for debugging or for fancier stuff:

.card img:not[alt] {
	color: 0,0,0
}

Pseudo elements

All pseudo-elements must be declared with a double colon:

::marker {
	color: red;
	font-family; fantasy;
	font-size: 1em;
	content; "Only x>>>"
}

The above will apply to all markers, that is, to all bullets/numbers in lists.

Note that including content means text may appear on the screen, but it will not be selectable: it is for display only and not part of the document itself.

The pseudo-elements can be declared as above, or with more specific selectors:

 
.card p {
	position: relative;
}
 
.card p::before {
	content: open-quote;
	font-size: 3em;
	position: absolute;
	top: -0.25em;
	left -0.5em;
}
 
.card p::after {
	content: close-quote;
}

This will add the content before and after to paragraphs inside a card class. Note that the quotes will be displayed but will not be selectable on the webpage (and it can be used instead of q elements in HTML)

Additionally, it allows us to style the item individually rather than affecting the entire paragraph.

Graph View