CSS - Pseudo-Selectors for KS3

Pseudo-Selectors

Pseudo-Selectors in use

Have you ever wondered how to select specific elements on a web page using CSS? Well, today we are going to learn about something called "Pseudo-Selectors" that can help us do just that! Pseudo-selectors are like special filters that allow us to select and style certain elements based on different conditions.

What are Pseudo-Selectors?

Pseudo-selectors start with a colon ( : ) or double colon ( :: ) followed by a special keyword. They are used in CSS to select specific elements based on different criteria. Let's learn about some common pseudo-selectors:

The :hover Pseudo-Selector

Definition:
The :hover pseudo-selector is used to select an element when we hover over it with the mouse.
Learn More:
MDN - :hover
Examples:
When you hover over a button, it changes color.
button:hover {
  color: red;
}

Links can change color when you hover over them.
a:hover {
  text-decoration: underline;
}

A menu item can expand or show more information when you hover over it.
.menu-item:hover .submenu {
  display: block;
}

The :focus Pseudo-Selector

Definition:
The :focus pseudo-selector is used to select an element when it receives focus, usually by being clicked or tabbed into.
Learn More:
MDN - :focus
Examples:
Changing the border color of a form field when it is selected.
input:focus {
  border-color: orange;
}

Increasing the font size of a textarea when it is in focus.
textarea:focus {
  font-size: 18px;
}

Adding a box shadow to a button when it is focused.
button:focus {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

The ::first-line Pseudo-Element

Definition:
The ::first-line pseudo-element is used to select and style the first line of text within an element.
Learn More:
MDN - ::first-line
Examples:
  • Changing the font style or color of the first line of a paragraph.
  • Applying special formatting or decorations to the opening sentence of an article.
  • Adding different text effects or animations to the first line of a heading.

The ::first-letter Pseudo-Element

Definition:
The ::first-letter pseudo-element is used to select and style the first letter of text within an element.
Learn More:
MDN - ::first-letter
Examples:
  • Enlarging the first letter of a paragraph for a decorative effect.
  • Applying a different font or color to the initial letter of a heading.
  • Adding special styling or animations to the first letter of a blockquote.

The :active Pseudo-Selector

Definition:
The :active pseudo-selector is used to select an element when it is being activated or clicked by the user.
Learn More:
MDN - :active
Examples:
Changing the background color of a button while it is being clicked.
button:active {
  background-color: yellow;
}

Applying a different style to a link when it is being pressed.
a:active {
  color: green;
}

Animating or adding transitions to elements when they are being activated.
.box:active {
  animation: shake 0.5s;
}

The :checked Pseudo-Selector

Definition:
The :checked pseudo-selector is used to select form elements that are checked, such as checkboxes or radio buttons.
Learn More:
MDN - :checked
Examples:
Changing the color of a checkbox when it is checked.
input[type="checkbox"]:checked {
  color: blue;
}

Styling the label associated with a checked radio button.
input[type="radio"]:checked + label {
  font-weight: bold;
}

Showing or hiding content based on the selected checkboxes.
.content[data-category="games"] {
  display: block;
}

The ::last-child Pseudo-Selector

Definition:
The ::last-child pseudo-selector is used to select the last child element of its parent.
Learn More:
MDN - ::last-child
Examples:
  • Styling the last item in a list differently.
  • Applying special formatting to the last paragraph in a section.
  • Targeting the last image in a gallery to add a border or shadow effect.

The :first-child Pseudo-Selector

Definition:
The :first-child pseudo-selector is used to select the first child element of its parent.
Learn More:
MDN - :first-child
Examples:
  • The first paragraph in an article can have a different style.
  • The first item in a list can be highlighted.
  • The first picture in a gallery can be enlarged.

The :nth-child() Pseudo-Selector

Definition:
The :nth-child() pseudo-selector is used to select elements based on their position in the parent.
Learn More:
MDN - :nth-child()
Examples:
  • Changing the color of every second paragraph in an article.
  • Applying different styles to odd and even table rows.
  • Selecting specific elements within a container based on their position.

The :disabled Pseudo-Selector

Definition:
The :disabled pseudo-selector is used to select form elements that are disabled and cannot be interacted with by the user.
Learn More:
MDN - :disabled
Examples:
Applying a different opacity to disabled buttons.
button:disabled {
  opacity: 0.5;
}

Changing the cursor to indicate that a form element is disabled.
input:disabled {
  cursor: not-allowed;
}

Preventing user interactions or events on disabled form elements.
button:disabled {
  pointer-events: none;
}

The :read-only Pseudo-Selector

Definition:
The :read-only pseudo-selector is used to select form elements that are read-only, meaning users cannot edit their value.
Learn More:
MDN - :read-only
Examples:
  • Applying a different style to read-only input fields.
  • Disabling the delete button for read-only comments.
  • Changing the background color of read-only text areas.

The ::before Pseudo-Element

Definition:
The ::before pseudo-element is used to insert content before the content of an element.
Learn More:
MDN - ::before
Examples:
  • Adding icons or decorative elements before headings.
  • Creating custom bullet points for lists.
  • Inserting content before links to indicate external or internal links.

The ::after Pseudo-Element

Definition:
The ::after pseudo-element is used to insert content after the content of an element.
Learn More:
MDN - ::after
Examples:
  • Adding decorative elements or icons after paragraphs.
  • Creating custom tooltips or pop-up messages.
  • Inserting content after buttons to indicate additional information or actions.

The :target Pseudo-Selector

Definition:
The :target pseudo-selector is used to select an element that is currently the target of a URL anchor link.
Learn More:
MDN - :target
Examples:
  • Highlighting the selected section in a navigation menu.
  • Showing and hiding content based on anchor links.
  • Animating scroll-to behavior within a page.

The ::selection Pseudo-Element

Definition:
The ::selection pseudo-element is used to select and style the portion of text that is selected by the user.
Learn More:
MDN - ::selection
Examples:
  • Changing the background color and text color of selected text.
  • Adding a custom border or shadow effect to selected text.
  • Styling the selection differently for different parts of the page.

The :not() Pseudo-Selector

Definition:
The :not() pseudo-selector is used to select elements that do not match a specific selector.
Learn More:
MDN - :not()
Examples:
  • Selecting all paragraphs except the ones with a specific class.
  • Styling all elements except links within a navigation menu.
  • Applying styles to all images except the ones with a certain size.

The ::placeholder Pseudo-Element

Definition:
The ::placeholder pseudo-element is used to style the placeholder text within an input or textarea element.
Learn More:
MDN - ::placeholder
Examples:
  • Changing the color or font style of placeholder text.
  • Adding background or border styles to the input field when it has placeholder text.
  • Animating or transitioning the appearance of placeholder text.

The :nth-child() Pseudo-Selector

Definition:
The :nth-child() pseudo-selector is used to select elements based on their position in the parent.
Learn More:
MDN - :nth-child()
Examples:
  • Changing the color of every second paragraph in an article.
  • Applying different styles to odd and even table rows.
  • Selecting specific elements within a container based on their position.

The :last-child Pseudo-Selector

Definition:
The :last-child pseudo-selector is used to select the last child element of its parent.
Learn More:
MDN - :last-child
Examples:
  • The last paragraph in an article can have a different style.
  • The last item in a list can be highlighted.
  • The last image in a gallery can have a border.

The :empty Pseudo-Selector

Definition:
The :empty pseudo-selector is used to select an element that has no child elements or text content.
Learn More:
MDN - :empty
Examples:
  • Styling an empty div to show a placeholder message.
  • Changing the background color of an empty list.
  • Hiding an empty container using CSS.

The :not() Pseudo-Selector

Definition:
The :not() pseudo-selector is used to select elements that do not match a specified selector.
Learn More:
MDN - :not()
Examples:
  • Styling all paragraphs except the first one.
  • Applying styles to all list items except those with a specific class.
  • Hiding specific elements based on their class or attribute.

The :nth-of-type() Pseudo-Selector

Definition:
The :nth-of-type() pseudo-selector is used to select elements of a specific type based on their position in the parent.
Learn More:
MDN - :nth-of-type()
Examples:
  • Styling every second paragraph in an article.
  • Applying different colors to odd and even table rows.
  • Selecting specific types of elements within a container based on their position.

The :only-child Pseudo-Selector

Definition:
The :only-child pseudo-selector is used to select an element that is the only child of its parent.
Learn More:
MDN - :only-child
Examples:
  • Styling a single image in a gallery that is the only child of its parent.
  • Applying specific styles to the only paragraph in a section.
  • Selecting a unique element within its container when it is the only child.

The :first-of-type Pseudo-Selector

Definition:
The :first-of-type pseudo-selector is used to select the first element of its type among its siblings.
Learn More:
MDN - :first-of-type
Examples:
  • Styling the first paragraph in an article differently.
  • Targeting the first item in a list to add a special marker or style.
  • Selecting the first occurrence of a specific type of element on a page.

The :valid Pseudo-Selector

Definition:
The :valid pseudo-selector is used to select form elements that have valid input based on their defined constraints or validation rules.
Learn More:
MDN - :valid
Examples:
Applying a green border to an input field with valid data.
input:valid {
  border: 2px solid green;
}

Showing a checkmark icon next to a valid form input.
input:valid {
  background-image: url(checkmark.png);
}  

Adding a success message when a form input is valid.
input:valid + .message {
  display: block;
}

The :invalid Pseudo-Selector

Definition:
The :invalid pseudo-selector is used to select form elements that have invalid input based on their defined constraints or validation rules.
Learn More:
MDN - :invalid
Examples:
Applying a red border to an input field with invalid data.
input:invalid {
  border: 2px solid red;
}

Displaying an error message when a form input is invalid.
input:invalid + .error-message {
  display: block;
}

Disabling the form submission button when there are invalid inputs.
input:invalid ~ button[type="submit"] {
  pointer-events: none;
}