Scribd
Upload
3 views

css_selectors_cheat_sheet

This document is a cheat sheet for CSS selectors, outlining various types such as universal, type, class, ID, group, descendant, child, adjacent sibling, general sibling, attribute, pseudo-class, and pseudo-element selectors. Each selector type is described with its syntax and purpose. It serves as a quick reference for web developers to understand how to target HTML elements using CSS.

Uploaded by

christianmuwa42
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

css_selectors_cheat_sheet

This document is a cheat sheet for CSS selectors, outlining various types such as universal, type, class, ID, group, descendant, child, adjacent sibling, general sibling, attribute, pseudo-class, and pseudo-element selectors. Each selector type is described with its syntax and purpose. It serves as a quick reference for web developers to understand how to target HTML elements using CSS.

Uploaded by

christianmuwa42
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

CSS Selectors Cheat Sheet

Universal Selector

* { } - Targets all elements

Type Selector

element { } - Targets all elements of a specific type (e.g., p, h1)

Class Selector

.className { } - Targets elements with a specific class

ID Selector

#idName { } - Targets a specific element with an ID

Group Selector

selector1, selector2 { } - Targets multiple selectors at once

Descendant Selector

ancestor descendant { } - Targets elements inside another element

Child Selector

parent > child { } - Targets direct children of an element

Adjacent Sibling Selector

element1 + element2 { } - Targets the element immediately after another


CSS Selectors Cheat Sheet

General Sibling Selector

element1 ~ element2 { } - Targets all siblings after a specified element

Attribute Selector

element[attribute] { } - Targets elements with a specific attribute

Pseudo-class Selector

element:pseudo-class { } - Targets elements in a specific state (e.g., :hover, :first-child)

Pseudo-element Selector

element::pseudo-element { } - Targets part of an element (e.g., ::before, ::after)

You might also like