How do I hide only the first element of a type?

Answer 1

You have wrong, ctr doesn't exist, and you need to tell with > to select the first element level in your page selector try this:

.ctr-1 > h3:first-child{ display:none; }

Answer 2

They are both technically the first-child.

In your example, you could do:

.ctr-1 > h3:first-child { display:none; }

Answer 3

This is what the first-of-type and nth-of-type selectors are for.

For example:

.ctr-1 h3:first-of-type { display:none; }
/* - Or - */
.ctr-1 h3:nth-of-type(0) { display:none; }

This would hide the first h3 descendant of .ctr-1, regardless of its location inside the parent element.

Granted, in your specific example, the h3 is indeed also the immediate (>) and first (:first-child) descendant of .ctr-1 . But if this is a coincidence, you might not be able rely on it. In that case, nth-of-type is the way to go.

Answer 4

Like this:

.ctr-1 > h3:first-child {
    display:none; 
}

jsFiddle here

Answer 5

You can use:

.ctr-1 > h3 { display: none; }