：first-child伪不适用

Question

I want to apply some styles to first-child of <dl> . I meant to say that should be applied to first <dd> . But it works if i remove <dt></dt> in the <dl> .

<dl>
    <dt>Test</dt>
    <dd>One</dd>
    <dd>Two</dd>
    <dd>Three</dd>
    <dd>Four</dd>
    <dd>Five</dd>
</dl>

CSS:

dl dd:first-child{border:1px solid red}

Answer 1

Use first-of-type instead:

dl dd:first-of-type{border:1px solid red}

Demo Fiddle

---

The reasoning...

first-of-type

The :first-of-type CSS pseudo-class represents the first sibling of its type in the list of children of its parent element.

-vs-

first-child

The :first-child CSS pseudo-class represents any element that is the first child element of its parent.

In your case, first-child wont work, because the first dd is not the first child of dl