Basic Selectors

These are the simplest selectors in CSS. They help you grab elements directly by their tag names or by using a wildcard. Think of them as the most general way of saying “style all of this type.”

* — selects all elements. Useful when you want to apply a rule everywhere (like resetting margins).
p — selects all <p> elements. Think of it as “style every paragraph on the page.”
h1, h2 — selects all <h1> and <h2> elements together. Great for grouping similar styles.

p { color: blue; }

Class and ID Selectors

Classes and IDs are special labels you give to elements in HTML. A class (.) is like a sticker you can put on many items, while an ID (#) is a unique name for one special item. This helps you style specific parts of your page easily.

.btn — selects elements with class=”btn”. You can reuse classes across multiple elements.
#main — selects the element with id=”main”. IDs should only be used once on a page.

.btn { background: green; }
#main { padding: 20px; }

Attribute Selectors

Attribute selectors let you target elements based on the presence or value of an attribute. This is useful when you want to style links, inputs, or other elements depending on how they are defined in HTML.

a[href] — selects links with an href. It ensures you only style clickable links.
input[type="text"] — selects only text input fields, not checkboxes or radio buttons.
[title~="flower"] — selects elements with a title containing the word “flower”.

a[href] { text-decoration: underline; }

Pseudo-classes

Pseudo-classes target elements in a special state, like when you hover your mouse or when a form field is focused. They describe “when” something is happening rather than “what” it is.

a:hover — applies styles when the user hovers the mouse over a link.
p:first-child — styles only the first paragraph inside a parent element.
input:focus — highlights an input box when it is clicked or active.

a:hover { color: red; }

Combinators

Combinators describe the relationship between elements. Instead of selecting items by themselves, you can say “select items inside this box” or “select the next item after this one.” They let you be precise about structure.

div p — selects all paragraphs inside a div (descendant).
div > p — selects only direct child paragraphs of a div.
div + p — selects the paragraph immediately after a div.
div ~ p — selects all paragraphs that come after a div (siblings).

div > p { margin: 0; }

CSS Selector Cheatsheet

Basic Selectors

Class and ID Selectors

Attribute Selectors

Pseudo-classes

Combinators

🚀 Explore More Free Developer Tools

📚 JSON Cheatsheet

🔧 .gitignore Generator

📚 SCSS Cheatsheet