Complete CSS Selector Guide for Beginners

In this guide we'll some of the most common CSS selectors to target HTML elements with styling. Knowing about the selectors will help clean up your CSS rulesets and be the most efficient in styling elements.

How to apply CSS to your website

The same way HTML is made up of elements (consisting of tags, attributes, and content), CSS is made up of rulesets (selectors & declarations - property + value). Here is an example of a CSS ruleset:

p {
    color: red;
}

The most basic CSS ruleset consists of the selector (p in this case), curly braces, and then declarations between the braces. You can learn more about applying CSS to HTML in my guide The 5 Ways to Add CSS to Your Website: A Complete Guide.

There are a number of selectors that you can use. Let's cover those next.

The Universal Selector

The Universal Selector is denoted by the asterisk as the selector and is generally used to neutralize browser default styles in a CSS Reset file or your own reset rulesets.

* {
    margin: 0; 
    padding: 0; 
    box-sizing: border-box;
}

The Universal Selector is useful because it selects all elements on a page.

The Element Selector

The Element Selector is one of the best ways to get started building out css rulesets. It is the perfect transition from HTML because you are simply naming the HTML element as the selector followed by the curly braces and declarations.

p {
    color: red;
    text-decoration: underline;
}

When you are looking to style all of the elements with a given HTML name be sure to use the Element selector. I find rulesets much easier to read when you use these broader selectors before going more niche.

The Class Selector

In HTML you can attach a class attribute to associate a bunch of elements together and in CSS you can then target that class attribute to style those elements all in the same way. It is like element selector but it isn't element specific. For instance if you wanted all your first headings and paragraphs to be the color red you could do that with element selectors or with a class selector.

<h1 class="red-style>I want this heading to be in the red-style class</h1>
<p class="red-style>I want this paragraph to be in the red-style class</p>
<p>This paragraph is not in the red-style class because it doesn't use the class attribute</p>

/* The Element Selector - What We Just Learned */
h1, p {
    color: red;
}

.red-style {
    color: red;
}

To use the class selector you want to first type a period followed by the name of the class and then curly braces. In the example above if we were to use the Element selector all the headings and paragraphs would be styled. If were to use the class selector only the headings and paragraphs that have the HTML class attribute would be the color red.

The ID Selector

The id selector is very similar to the class selector except instead of targeting a group of elements you are just targeting one specific element. When you think of the id selector think of yourself (you are the only unique living breathing person on the planet). To use the id selector you need to first use the HTML id attribute on an element and then in css use the octothorpe (hashtag, pound sign, etc.) followed by the name of the id.

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <submit type="submit" value="Submit">
</form>

#name {
    color: red;
}

You'll see the id attribute used a lot in forms but you also can use the id attribute for any element just like the class attribute. The only difference is the id is for one element whereas multiple elements can be in a class.

The Attribute Selectors

The attribute selector is used when you want to target an element/s with a specific attribute. When writing the CSS selector it can be used in conjunction with the element name or separate. Take this example:

<form>
    <label for="name">Name:</label>
   <input type="text" id="name" name="name" required>

   <label for="email">Email:</label><br>
   <input type="email" id="email" name="email"><br><br>

   <label for="comments>Comments:</label><br>
   <textarea id="comments" name="comments" required></textarea><br><br>

   <input type="submit" value="Submit:>
</form>

[required] {
  border: 2px solid red;
}

input[required],
textarea[required] {
  border: 2px solid red;
}

Here both CSS rulesets accomplish the same thing, but using element + attribute is a bit more specific and clear.

There are multiple variations of the attribute selector beyond checking the existence of an attribute like the example above to keep in mind:

• [attribute="value"] means the value should exactly match
• [attribute~="value"] is use when an attribute has multiple values separated by spaces and you are targeting a specific value. An example would be multiple classes listed under the class attribute.

<div class="note important urgent">Read me</div>

<style>
  [class~="important"] {
    font-weight: bold;
  }
</style>

• [attribute|="value"] targets values with hyphens and is used when you want to target language codes.

<p lang="en-US">Hello!</p>

  [lang|="en"] {
    color: green;
  }

• [attribute^="value"] matches the start of a value
• [attribute$="value"] matches the end of a value
• [attribute*="value"] matches a substring within the value

The Descendent Selector

Any descendent element within a container that matches this selector will be styled.

div p {
  color: red;
}

<div>
  <p>This will be blue</p>          <!-- ✅ direct child -->
  <section>
    <p>This will also be blue</p>   <!-- ✅ grandchild -->
  </section>
</div>

<p>This will NOT be blue</p>        <!-- ❌ outside div -->

Here we are selecting all <p> elements inside a <div>. It serves as like a catch all to style all descendents of a parent container.

The Child Selector

The child selector will select all the immediate children of a parent container. This is a selector I personally use more often then most and find it a bit more intuitive then some other selectors.

    div > a {
        color: blue;
        text-decoration: underline;
    }

The child selector is in a lot of ways an expansion of the element selector where you are "digging deeper" to select internal elements of parents. All you need to do is use the > after the tag name, class name, etc. and then specify the child element/s that you wish to target. Direct children will be stylized. Any non-immediate children like grandchildren or great grandchildren will not be adjusted.

The Adjacent Sibling Selector

When you want to style the element immediately next to another you can use the adjacent sibling selector. Instead of the > you will want to use the + symbol.

h1 + p {
    color: red;
}

<h1>Title</h1>
<p>This paragraph will be selected.</p>
<p>This paragraph will not be selected.</p>

Note: Elements cannot be in different containers and must have the same parent.

The General Sibling Selector

You can think of the general sibling selector as an expansion of the sibling selector. Instead of a + you will use a ~ and it will style all sibling elements that come after (not before) the element.

.warning ~ p {
  color: red;
  font-weight: bold;
}

<div class="content">
  <div class="warning">⚠️ Warning: Please read carefully.</div>
  <p>Note 1: Important detail.</p>
  <p>Note 2: Additional information.</p>
  <p>Note 3: Final note.</p>
</div>

All paragraphs that follow the div element with the "warning" class will be styled. If there was a paragraph preceding the warning class it would not be styled.

The Pseudo-Class Selectors

With Pseudo-Classes you select elements based on their state, position, or characteristic. Let us breakdown what that means.

Essentially you'll specify the element/s followed by a colon and then some defining aspect of the element/s that you want to target. In a lot of ways it is similar to regular expressions (regex).

One of the most common ones I use the most frequently is the hover pseudo-class which is useful when you want to show a response to the client when they hover of an element like a button for instance before clicking it.

a:hover {
   background-color: #333;
}

Below are all of the available pseudo-classes you can use when building out css rulesets.

/* === User Action Pseudo-classes === */

/* Link color when not visited */
a:link {
  color: blue;
}

/* Link color when visited */
a:visited {
  color: purple;
}

/* Button background while being clicked */
button:active {
  background-color: darkorange;
}

/* Input border when focused */
input:focus {
  border-color: teal;
  outline: none;
}

/* Div background on mouse hover */
div:hover {
  background-color: lightyellow;
}

/* === Structural Pseudo-classes === */

/* First child element styling */
li:first-child {
  font-weight: bold;
}

/* Last child element styling */
li:last-child {
  font-style: italic;
}

/* Nth child (2nd) */
p:nth-child(2) {
  color: darkgreen;
}

/* Nth child from end (last) */
p:nth-last-child(1) {
  text-decoration: underline;
}

/* First of its type */
div:first-of-type {
  border-top: 2px solid black;
}

/* Last of its type */
div:last-of-type {
  border-bottom: 2px solid black;
}

/* Nth of its type */
div:nth-of-type(2) {
  background-color: #eee;
}

/* Nth of its type from the end */
p:nth-last-of-type(1) {
  font-style: oblique;
}

/* Only child */
li:only-child {
  color: red;
}

/* Only of its type */
h1:only-of-type {
  text-transform: uppercase;
}

/* Empty element */
div:empty {
  display: none;
}

/* Root element */
:root {
  --main-color: crimson;
}

/* === Form Pseudo-classes === */

/* Checked checkboxes or radios */
input:checked {
  accent-color: green;
}

/* Disabled inputs */
input:disabled {
  background-color: #ddd;
  cursor: not-allowed;
}

/* Read-only textarea */
textarea:read-only {
  background-color: #f9f9f9;
}

/* Placeholder text visible */
input:placeholder-shown {
  font-style: italic;
}

/* === Other Useful Pseudo-classes === */

/* Exclude divs with class active */
div:not(.active) {
  opacity: 0.6;
}

/* Match any of these headings */
:is(h1, h2, h3) {
  margin-bottom: 0.5em;
}

/* Like :is(), but zero specificity */
:where(section, article) {
  padding: 1em;
}

/* Select divs containing images */
div:has(img) {
  border: 1px solid #ccc;
}

/* Default form control */
input:default {
  border-color: blue;
}

/* Valid input */
input:valid {
  border-color: green;
}

/* Invalid input */
input:invalid {
  border-color: red;
}

/* Required input */
input:required {
  border-left: 3px solid orange;
}

/* Optional input */
input:optional {
  background-color: #fafafa;
}

/* Out of range input */
input:out-of-range {
  box-shadow: 0 0 5px red;
}

/* In range input */
input:in-range {
  box-shadow: 0 0 5px green;
}

/* Paragraphs in English */
p:lang(en) {
  font-style: italic;
}

The Pseudo-Element Selectors

A Pseudo-Element Selector visually is almost similar to a Pseudo-Class Selector except for an additional colon ":". The most common selector I see being used is ::before or ::after like when you want to add an special icon immediately before or after an element.

<p>This is a paragraph with a pseudo-element.</p>

p::before {
  content: "💡 ";
}

Result 💡 This is a paragraph with a pseudo-element.

When using before and after you'll need to specify the content you wish to add before or after the css element.

Pseudo-element Selectors

/* Adds a light bulb emoji before every paragraph */
p::before {
  content: "💡 ";
  color: orange;
}

/* Adds a sparkle emoji after every paragraph */
p::after {
  content: " ✨";
  color: purple;
}

/* Styles only the first line of the paragraph */
p::first-line {
  font-weight: bold;
  text-transform: uppercase;
}

/* Styles the first letter of the paragraph */
p::first-letter {
  font-size: 200%;
  color: teal;
  font-weight: bold;
}

/* Styles the text the user selects anywhere on the page */
::selection {
  background: yellow;
  color: black;
}

/* Changes the color and size of bullets or numbers in list items */
li::marker {
  color: red;
  font-size: 1.2em;
}

/* Styles the backdrop (background overlay) of modal dialogs */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

/* Styles the placeholder text inside input fields */
input::placeholder {
  color: gray;
  font-style: italic;
}

/* Styles the button of a file input */
input::file-selector-button {
  background: lightblue;
  border: none;
  padding: 0.5em;
  cursor: pointer;
}

Final Thoughts

I also find it empowering to know the expanse of a topic and hope this kind is useful for knowing all about the different types of css selectors you can use. While it isn't required to memorize the css selectors I recommend practicing adding one new selector each time you build a new project so that you can expand your capacity for css. Happy styling!