DEV Community

loading...

CSS: Basic Selectors

koralarts profile image Karl Castillo ・Updated on ・3 min read

We left off with the questions:

  • What if we want certain div elements to have a different background colour or border?
  • What if we only want one of our p elements to have a font size of 12px?

The answer to those two questions is selectors. A selector is basically how we determine which element the styles will be applied.

1. Universal

[*]: Selects all elements.

* {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

2. Element

[selector]: Selects all elements that matches the name.

div {
  background-color: red;
}

h1 {
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode

3. Id

[#id]: Selects the element whose id matches the selector. The selector starts with a pound symbol (#) followed by the element's id.

<h1 id="special-heading">Heading 1</h1>
Enter fullscreen mode Exit fullscreen mode
#special-heading {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

4. Class

[.class]: Selects all elements whose class attribute matches the selector. The element can have more than one class. The selector starts with a period (.) followed by one of the element's classes.

<h1 class="red bold">Red and Bold</h1>
<h1 class="blue bold">Blue and Bold</h1>
<h1 class="bold">Bold</h1>
<h1 class="blue">Blue</h1>
Enter fullscreen mode Exit fullscreen mode
.red {
  color: red;
}

.blue {
  color: blue;
}

.bold {
  font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode

5. Attribute

[[attr=value]]: Selects the elements whose attribute-value pair matches the selector.

<input type="email" name="email" />
<input type="submit" />
Enter fullscreen mode Exit fullscreen mode
[name="email"] {
  background: blue;
}

[type="submit"] {
  background: red;
}
Enter fullscreen mode Exit fullscreen mode

6. Descendant

[selector selector]: The descendant selector is used when you want apply styling to descendants of an element.

<div class="container">
  <div class="container-footer">
    <h2>Heading 2</h2>
    <div>
      <p>Paragraph</p>
    </div>
  </div>
</div>
<div class="container-2">
  <div class="container-footer">
    <h2>Heading 2</h2>
    <div>
      <p>Paragraph</p>
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode
.container h2 {
  color: blue;
}

.container p {
  color: red;
}

div .container-footer p {
  font-size: 8px;
}
Enter fullscreen mode Exit fullscreen mode

Demo

7. Direct Descendant

[selector > selector]: The direct descendant selector is similar to the regular descendant except styling is only applied to direct descendants.

<section>
  <p>Paragraph</p>
  <div>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <div>
      <p>Paragraph 4</p>
    </div>
  </div>
</section>
Enter fullscreen mode Exit fullscreen mode
section > p {
  color: blue; 
}

section > div > p {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

Demo

8. Sibling

[selector ~ selector]: Sibling selectors applies the styling to sibling elements that matches the selector following the previous selector.

<h1>Heading 1</h1>
<p class="red">Paragraph 1</p>
<p>Paragraph 2</p>
<h1 class="red">Heading 2</h1>
<p>Paragraph 3</p>
<span class="red">Span 1</span>
Enter fullscreen mode Exit fullscreen mode
p ~ .red {
  color: red;
}

h1 ~ .red ~ p {
  color: pink;
}
Enter fullscreen mode Exit fullscreen mode

Demo

9. Adjacent Sibling

[selector + selector]: Direct Sibling selectors are similar to the sibling selector but it only applies the style to the next sibling element if it matches the selector.

<h1>Heading 1</h1>
<p class="red">Paragraph 1</p>
<p>Paragraph 2</p>
<h1 class="red">Heading 2</h1>
<p>Paragraph 3</p>
<span class="red">Span 1</span>
Enter fullscreen mode Exit fullscreen mode
h1 + .red {
  color: red;
}

h1 + .red + span {
  color: pink;
}
Enter fullscreen mode Exit fullscreen mode

Demo


10. Multiple Selectors

[selector, selector]: Combine selectors.

#special-heading,
.red,
h1 ~ div > p,
ul > li > p + span {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

Now that we know more about the basic selectors, we'll talk about the box model in the next post.

Discussion (2)

pic
Editor guide
Collapse
jlrxt profile image
Jose Luis Ramos T.

Siguiendote a hora. Muy útil. gracias.

Collapse
helleworld_ profile image
Desiré 👩‍🎓👩‍🏫

Loving it, so well explained. Thanks, Karl!