CODEWITHSUNDEEP
htmlcss
Igor-G
Igor-G

Reputation: 231

Selecting first UL using CSS

Is it possible to select first UL using CSS in the DIV, this is the HTML that I use

<div class="block">
    <h2>External</h2>
    <ul>
        <li><span class="indicator success"></span>1</li>
        <li><span class="indicator success"></span>2</li>
    </ul>
    <ul>
        <li><span class="indicator success"></span>1</li>
        <li><span class="indicator success"></span>2</li>
    </ul>
</div>

Upvotes: 6

Views: 12328

Answers (5)

Todd Mark
Todd Mark

Reputation: 1885

There is two ways to achieve it:

  1. ul:first-of-type
  2. ul:nth-child(2)

`

Upvotes: 6

Sleek Geek
Sleek Geek

Reputation: 4686

You can simply do:

ul:nth-of-type(1) {

/* CSS Rules */

}

Upvotes: 2

LcSalazar
LcSalazar

Reputation: 16821

The previous answers are right, but you should preceed them with .block parent selector to select only inside the wanted div:

.block ul:first-of-type {
  color: red
}
<div class="block">
  <h2>External</h2>
  <ul>
    <li><span class="indicator success"></span>1</li>
    <li><span class="indicator success"></span>2</li>
  </ul>
  <ul>
    <li><span class="indicator success"></span>1</li>
    <li><span class="indicator success"></span>2</li>
  </ul>
</div>

Upvotes: 2

Danield
Danield

Reputation: 125443

Use first-of-type

ul:first-of-type {
    /* css rules */
}

DEMO

ul:first-of-type {
  color: red
}
<div class="block">
  <h2>External</h2>
  <ul>
    <li><span class="indicator success"></span>1</li>
    <li><span class="indicator success"></span>2</li>
  </ul>
  <ul>
    <li><span class="indicator success"></span>1</li>
    <li><span class="indicator success"></span>2</li>
  </ul>
</div>

Upvotes: 11

kapantzak
kapantzak

Reputation: 11750

Use :first-child

ul:first-child {
    /* css rules */
}

Upvotes: 2

Related Questions