CSS伪类，以DIV中的第一个DIV .class为目标

Question

I thought I knew this. There's three div s (.service-box) inside one wrapper div (.p- div )

How do you target the first (or any.) of the three inner div s?

This works, shows the structure is correct, will remove all inner div s.

div.p-div > div.service-box { display: none!important;}

I just can't target the first inner div .

I've tried first-child , nth-of-type(1) , nth-child(1)

I did notice nth-of-type(1n) removes all inner div s like the first CSS line. While nth-of-type(2n) removes all but the 2nd inner div . Basically doing the opposite of what I would expect (apply display:none only to the 2nd div , leaving the others intact)

Gotta say I'm a little perplexed. Could just edit the HTML directly but.I thought we were past that you know?

Answer 1

.p-div > .service-box:first-of-type {
    background-color: red;
}

Get a child of .p-div that has class .service-box and then select only the first child.

.p-div could be anything: some-selector > .service-box:first-of-type

CodePen: http://codepen.io/theblindprophet/pen/JKpwLk