css select first element with specific tag

Question

I'm trying to make a css class that would give a background color to the first found element with a specific tag.. This CSS ``` .blue p:first-of-type { background-color:#2E9AFE; } ``` Works for example 1: ```

element 1

element 2

``` Doesn't work for example 2: ```

Parent 1
- Element 1.1
- Element 1.2

``` In example 2, first element with tag `p` is `Parent 1`, however my code colors every element. Why? Fiddle: http://jsfiddle.net/alexix/CYX32/1/

Accepted Answer

The `:first-of-type` selector selects the first of type contained within its parent element. In each case, the `p` is the first of type within their `li` elements.

If you wish to select the first of type `p` within the first of type `li` within the first of type `ul` you're going to have to use the following selector:

```
.blue > ul:first-of-type > li:first-of-type > p:first-of-type {
    background-color:#2E9AFE;
}
```

JSFiddle demo.

css select first element with specific tag

Solution

Problem