CODEWITHSUNDEEP
jqueryjquery-selectorseach
Seth Tipton
Seth Tipton

Reputation: 65

Style first and last element for each

I'm trying to style the first and last list item within the "wrapper" class by applying the "red" class. I have multiple sections on the page with the "wrapper" class.

<div class="wrapper">
  <div class="section">
    <ul class="parent">
      <li class="child">List Item</li>
      <li class="child">List Item</li>
      <li class="child">List Item</li>
      <li class="child">List Item</li>
      <li class="child">List Item</li>
      <li class="child">List Item</li>
    </ul>
  </div>
</div>
<div class="wrapper">
  <div class="section">
    <ul class="parent">
      <li class="child">List Item</li>
      <li class="child">List Item</li>
      <li class="child">List Item</li>
      <li class="child">List Item</li>
      <li class="child">List Item</li>
      <li class="child">List Item</li>
    </ul>
  </div>
</div>

https://jsfiddle.net/n2bg3zu4/

Upvotes: 0

Views: 227

Answers (3)

Suman Barick
Suman Barick

Reputation: 3411

Using jQuery you can write,

$('.wrapper .parent li:first-child, .wrapper .parent li:last-child').addClass('red')

Upvotes: 0

guest271314
guest271314

Reputation: 1

trying to style the first and last list item within the "wrapper" class

Try utilizing :nth-of-type() , :nth-last-of-type()

.wrapper li:nth-of-type(1),
.wrapper li:nth-last-of-type(1) {
  background-color: red;
}
<div class="wrapper">
  <div class="section">
    <ul class="parent">
      <li class="child">List Item</li>
      <li class="child">List Item</li>
      <li class="child">List Item</li>
      <li class="child">List Item</li>
      <li class="child">List Item</li>
      <li class="child">List Item</li>
    </ul>
  </div>
</div>
<div class="wrapper">
  <div class="section">
    <ul class="parent">
      <li class="child">List Item</li>
      <li class="child">List Item</li>
      <li class="child">List Item</li>
      <li class="child">List Item</li>
      <li class="child">List Item</li>
      <li class="child">List Item</li>
    </ul>
  </div>
</div>

jsfiddle https://jsfiddle.net/n2bg3zu4/4/

Upvotes: 1

Jose Mato
Jose Mato

Reputation: 2799

You can use css3 to do that:

.parent li:first-child, .parent li:last-child {
    background-color: red;
}

First and last li (list item) will be read in each .parent element

Upvotes: 1

Related Questions