Possible to select the first child (when the first element will often be different)

Question

My div sometimes starts with a p a h2 a h3 or an ul. Is there a way to select the first element of the div, regardless of what the element is?

Here is a JSFiddle https://jsfiddle.net/nv0mg602/

In the first div I would like the the first p to be red, not both p. In the second div I would like the first h2 to be red.

Thanks everyone. I've realised that .main:first-child doesn't work, but .main :first-child does (with a space between main and the colon)

why you don't simply try and see :) you will then have the anwser — Temani Afif, Jan 10 '18 at 20:19
Possible duplicate of [Select all direct descendant dom elements regardless of type](https://stackoverflow.com/questions/15302922/select-all-direct-descendant-dom-elements-regardless-of-type) — UncaughtTypeError, Jan 10 '18 at 20:20
You should really consider posting the `html` structure as well. The asterisk (`*`) is known as the **universal selector**, refer to https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors — UncaughtTypeError, Jan 10 '18 at 20:33
`.main :first-child` are the range of selectors you are looking for. — UncaughtTypeError, Jan 10 '18 at 20:36

Temani Afif · Accepted Answer · 2018-01-10T20:53:49.417

You should use :first-child selector with child item and not parent item, and since you want to consider all the childs (whataver the tags/classes are) you have to use the universal selector * (but it's not mandatory as you can see below).

Here is an example:

.main *:first-child {
    color: red;
}
/* or simply
.main :first-child {
    color: red;
}
*/

/* or use this to select ONLY direct childs
.main > :first-child {
    color: red;
}
*/

<div class="main">
  <p>
  Hello some type
  </p>
  <p>
  And some more
  </p>
</div>

<div class="main">
  <h2>
  A heading
  </h2>
  <p>
  And some more text
  </p>
</div>

Possible to select the first child (when the first element will often be different)

1 Answers1