Select first h2 in div but only if it is the first item

how can I select the first H2 in a div with a particular class but only if it is the absolute first item.

Explanatory example html with comments below

<div class="myclass">
	<h2>1st heading here</h2><!--/*would be selected*/-->
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium</p>
	<h2>2nd heading</h2><!--would not be selected-->
<div class="myclass">
	<p>ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
	<h2>3rd heading</h2><!--would not be selected-->

Using first-child like this:-


Use pseudo :first-child selector. This selects the first child element.

Do you also not want the first h2 to be selected if there is another element before it like, for example, an image tag? In this case how would it work?

So the correct properties to use would be :

h2:first-child or h2:nth-child(1). Pretty much all modern browsers support either or both of these. But a way to achieve what you are after w/o using n-childs would be to style the H2 as desire and then, using the wildcards and adjacent element selectors.


.container h2 { color:red;} /* I am the first element h2 in the container*/
.container * + h2{ color:black;} /*I am not  first*/

hope that helps :slight_smile:

Ah, thanks for the codepen. I misunderstood first child. I thought it would select the first h2, even if there was something else before it. I needed to remove margin from a h2 if it was the first thing in a second column of text so that lines of text align over the 2 columns

Thanks for this. I have used first child. But is there a reason to use wildcards and adjacent element selectors? Is there a performance difference? I imagine first child is better?

h2:first-of-type will select the first h2 even if something else is before it.

EDITED to add the following:

Unless you want to support older browsers, No, and since all browsers are auto updated these days, there is no good reason to support older browsers as they are likely to be security hazards.

I think @dresden_phoenix’s examples need a little more explanation. He left out the greater-than symbol :wink:

.container > h2 {color:red;}  /* color red the h2's that are children of .container */
.container > * + h2 {color:black;}  /* color black all of the chld h2's of .container  that are not the first child */

My play sheet isn’t very good, but it should help a little. IT’s a “working page”. Copy it to a file and open it in your browser. Edit the HTML as indicated and see the change. :slight_smile:

<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style type="text/css">
h2 {color:blue;} /* default color of h2 */
.container > h2 {color:red;}  /* color red the h2's that are children of .container */
.container > * + h2 {color:black;}  /* color black all of the chld h2's of .container  that are not the first child */

<div class="container">
    <p>a first child</p>  <!-- I am black. Delete me (or move me down) so h2 "Header1" becomes the first child. -->
    <h2>Header1</h2>   <!-- As the second child, am black.  Make me the first child and I will be RED -->
    <div class="basement">
        <h2>Header3</h2>  <!-- children of .basement, not children of .container -->
        <p>More text</p>
1 Like

As @ronpat pointed out, that is how first-of-type works. h2:first-child will select an h2 only if it is the first child of the parent element. If it is the second, third or fourth child, regardless of the type of those preceding it, it won’t be selected.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.