CSS : Pseudo-Classes / Pseudo-Elements / Attribute

Pseudo-Classes

hover

// Select while the mouse cursor is over the selector element
.box {
	width: 100px;
	height: 100px;
	background-color: orange;
	transition: 1s;
}

.box:hover {
	width: 300px;
	background-color: royalblue;
}

active

// Select while clicking the mouse on the selector element
a:active {
	color: red;	
}

focus

// Select when the selector element is focused
input:focus {
	background-color: orange;
}

// Elements that can be focused are HTML interactive content.
// INPUT, A, BUTTON, LABEL, SELECT
// Even if it is not applicable to the above, it can be focused by using the tabindex property.

html
<div class="box" tabindex="-1"></div>

first child

// Selects the first of the selector's sibling elements (selected if span exists, selects x if not)
.fruits span: first-child {
	color: red;
}

last child

// Select if it is the lastest of selector sibling elements
.fruits h3:last-child {
	color: red;
}

nth child

// Select if it is the Nth among selector sibling elements
.fruits *:nth-child(2) {
	color: red;
}

// nth choice of even number
.fruits *:nth-child(2n) {
	color: red;
}

// odd nth choice
.fruits *:nth-child(2n + 1) {
	color: red;
}

// choose from the second
.fruits *:nth-child(n + 2) {
	color: red;
}

Negation

// Select elements except selectors only
.fruits *:not(span) {
	color: red;
}

 

Pseudo-Elements

before (inline)

// Insert content before the interior of the selector element
.box::bafore{
	contents: "front";
}

after (inline) ⇒ display: block; ⇒ convert to block

// Insert content back to the inside of the selector element
.box::after {
	content: "";
}

 

Attribute

ATTR

// Element selection with attributes
[disabled] {
	color: red;
}

html
<input type="text" value="abcd" disabled>

[type="password"] {
	color: red;
}