Selectors

Basic selectors

Element

examples/span.html

h1 {
  color: blue;
}

span {
  font-weight: bold;
  font-size: 1.2rem;
  color: tomato;
}

<h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum, <span>dolor</span> sit amet consectetur adipisicing elit. Id, quia...</p>

Output:

Lorem ipsum dolor

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id, quia...

examples/div.html

div {
  color: tomato;
}

<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
<div>
  <p>Expedita, officia rem, non nulla harum ut fugit optio explicabo temporibus eligendi...</p>
  <p>Perferendis eaque ullam harum illum quas repudiandae dolore minima labore quod...</p>
</div>

Output:

Lorem ipsum dolor

Lorem ipsum dolor sit amet consectetur adipisicing elit...

Expedita, officia rem, non nulla harum ut fugit optio explicabo temporibus eligendi...

Perferendis eaque ullam harum illum quas repudiandae dolore minima labore quod...

#id

examples/id.html:

p {
  color: green;
}

#first {
  color: red;
}

<body>
  <h1>Lorem ipsum</h1>
  <p id="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  <p>Eveniet amet laudantium aperiam nisi ratione at, blanditiis...</p>
  <p>Culpa possimus obcaecati laudantium nesciunt consequatur...</p>
</body>

Output:

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Eveniet amet laudantium aperiam nisi ratione at, blanditiis...

Culpa possimus obcaecati laudantium nesciunt consequatur...

.class

examples/class.html:

p {
  color: green;
}

.red {
  color: red;
}

<body>
  <h1>Lorem ipsum</h1>
  <p class="red">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  <p>Culpa possimus obcaecati laudantium nesciunt consequatur...</p>
  <p class="red">Eveniet amet laudantium aperiam nisi ratione at, blanditiis...</p>
</body>

Output:

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Culpa possimus obcaecati laudantium nesciunt consequatur...

Eveniet amet laudantium aperiam nisi ratione at, blanditiis...

.class.class

examples/classclass.html:

.text-center {
  text-align: center;
}

.red {
  color: red;
}

h1.text-center.red {
  font-size: 3rem;
}

<body>
  <h1 class="red text-center">Lorem ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  <p class="red">Eveniet amet laudantium aperiam nisi ratione at, blanditiis...</p>
  <p>Culpa possimus obcaecati laudantium nesciunt consequatur...</p>
</body>

Combinators

Descendant combinator

examples/descendant-combinator.html:

header ul {
  list-style-type: none;
}

<body>
  <header>
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
    </ul>
  </header>
  <main>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </main>
</body>

Output:

  • Item 1
  • Item 2

CSS Question

What is the selection of body li? How many elements?

Pseudo-class

:hover

examples/p-hover.html

p:hover {
  font-weight: bold;
}

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta voluptatem ex autem incidunt, aut dolores veritatis nisi repellat perspiciatis nulla reiciendis eum doloribus fugit facere necessitatibus reprehenderit natus libero temporibus.</p>

Output:

:first-child

p:first-child {
  color: green;
}

<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  <p>Eveniet amet laudantium aperiam nisi ratione at, blanditiis...</p>
  <p>Culpa possimus obcaecati laudantium nesciunt consequatur...</p>
</body>

First Child

Output:

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Eveniet amet laudantium aperiam nisi ratione at, blanditiis...

Culpa possimus obcaecati laudantium nesciunt consequatur...

:nth-child(2)

p:first-child {
  color: red;
}

p:nth-child(2) {
  color: green;
}

<body>
  <h1>Lorem ipsum dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  <p>Eveniet amet laudantium aperiam nisi ratione at, blanditiis...</p>
  <p>Culpa possimus obcaecati laudantium nesciunt consequatur...</p>
</body>

nth child

Output:

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Eveniet amet laudantium aperiam nisi ratione at, blanditiis...

Culpa possimus obcaecati laudantium nesciunt consequatur...

:nth-child(2n)

p:nth-child(2n) {
  color: green;
}

<body>
  <h1>Lorem ipsum dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  <p>Eveniet amet laudantium aperiam nisi ratione at, blanditiis...</p>
  <p>Culpa possimus obcaecati laudantium nesciunt consequatur...</p>
</body>

nth child 2n

Output:

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Eveniet amet laudantium aperiam nisi ratione at, blanditiis...

Culpa possimus obcaecati laudantium nesciunt consequatur...

CSS Question

Is it possible to inspect :hover?
Is it possible to replace :first-child with :nth-child?
Is it possible to replace general/adjacent sibling combinator selector with :nth-child?
Is it possible to select odd or even elements?

Pseudo-element

::selection

examples/p-selection.html

p::selection {
  color: white;
  background-color: grey;
}

<h1>Lorem ispsum dolor</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta voluptatem ex autem incidunt, aut dolores veritatis nisi repellat perspiciatis nulla reiciendis eum doloribus fugit facere necessitatibus reprehenderit natus libero temporibus.</p>

Output:

Group of Selectors

elementname-1, elementname-2

h1, p

References