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;
}

2. Element

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

div {
  background-color: red;
}

h1 {
  color: blue;
}

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>
#special-heading {
  color: red;
}

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>
.red {
  color: red;
}

.blue {
  color: blue;
}

.bold {
  font-weight: bold;
}

5. Attribute

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

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

[type="submit"] {
  background: red;
}

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>
.container h2 {
  color: blue;
}

.container p {
  color: red;
}

div .container-footer p {
  font-size: 8px;
}

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>
section > p {
  color: blue; 
}

section > div > p {
  color: red;
}

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>
p ~ .red {
  color: red;
}

h1 ~ .red ~ p {
  color: pink;
}

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>
h1 + .red {
  color: red;
}

h1 + .red + span {
  color: pink;
}

Demo


10. Multiple Selectors

[selector, selector]: Combine selectors.

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

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

Discussion

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!