CODEWITHSUNDEEP
htmlcss
Veronica Rillo
Veronica Rillo

Reputation: 11

First Child Qualified Heading

I am trying to change the format of a set of tabs - The first being aligned to the left and the last to the right, with those in between in the center, a shortened version: https://jsfiddle.net/qqwc51sb/2/.

.krown-tabs .titles li {
  border: 1px solid #000;
  width: 20%;
  display: table;
  float: left;
}
.krown-tabs .titles h5 {
  text-align: center;
}
.krown-tabs .titles h5:first-child {
  text-align: left;
}

The :first-child doesn't work, I think because <h5> is qualified. However, the rest of the formatting for the tab text is within this selector, and doesn't work without the <h5>.

Thank you

Upvotes: 1

Views: 37

Answers (1)

Morteza QorbanAlizade
Morteza QorbanAlizade

Reputation: 1550

You should use :first-child and :last-child for <li>, Not <h5>. Like this:

.krown-tabs li:first-child h5 {
  background: red;
}
.krown-tabs li:last-child h5 {
  background: blue;
}


.krown-tabs .titles li, .memberdeck .dashboardmenu li {
    border: 1px solid #000;
    width: 20%;
    display: table;
    float: left;
 }
.krown-tabs .titles h5 {
    text-align: center;
}
.krown-tabs .titles h5:first-child {
    text-align: left;
}
.krown-tabs li:first-child h5 {
  background: red;
}
.krown-tabs li:last-child h5 {
  background: blue;
}
<div class="krown-tabs clearfix">
  <ul class="titles clearfix autop">
    <li class="">
      <h5>All</h5>
    </li>
    <li class="opened">
    <h5>Arts</h5>
    </li>
    <li>
      <h5>Fashion</h5>
    </li>
    <li>
      <h5>Food & Drink</h5>
    </li>
    <li>
      <h5>Wellbeing</h5>
    </li>
  </ul>
</div>

Upvotes: 4

Related Questions