CODEWITHSUNDEEP
csscomputer-science
Tod Lazarov
Tod Lazarov

Reputation: 91

CSS selector of first child, if multiple exist

I have this as part of one of my tables.

<header>
  <h1>...</h1>
  <p>...</p>
  <p>...</p>
  <h2>...</h2>
  <dl>
    <dt>...</dt>
    <dd>...</dd>
  </dl>
  <dl>
    <dt>...</dt>
    <dd>...</dd>
  </dl>
</header>

How do can I select just the first dt? The one that containts Calories in it?

Upvotes: 1

Views: 213

Answers (2)

Ajay Gupta
Ajay Gupta

Reputation: 2957

You can try like this 

dl > dt:first-child{
    background-color:red;
}

Using it every first <dt> element background-color under <dl> element is turned red.

Upvotes: 0

KWeiss
KWeiss

Reputation: 3144

dl:first-child dt {
    // ...
}

Since the dl is not the first child as described in comments, you'll need a different selector:

dl:first-of-type dt {
    // ...
}

Or — just give the dt a class.

Upvotes: 4

Related Questions