CODEWITHSUNDEEP
htmlcss
Lenut Ileni
Lenut Ileni

Reputation: 23

I want to get rid of the repetitive code in this CSS

I have the following 3 nav-items and I made a CSS design for them, but I had to take each 'nav-item' after the 'id', because the first 'nav-item' has a different design than the other 2. Could I get rid of the repetitive code, but still at the first 'nav-item' to remain this design?

.nav {
  width: 100%;
}

.nav-item {
  width: 30%;
  text-align: center;
}

.nav-link {
  background-color: #F3F4F5;
  color: black;
  font-family: "Times New Roman", Times, serif;
}

#progress-item {
  clip-path: polygon(90% 0%, 0% 0%, 0% 100%, 100% 100%);
}

#rank-item {
  margin-left: -2.5%;
  clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
}

#achievements-item {
  margin-left: -2.5%;
  clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
}
<link rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item" id="progress-item" role="presentation">
      <a class="nav-link" id="progress-tab" data-toggle="tab" href="#progress">
        Overall progress
      </a>
    </li>
    <li class="nav-item" id="rank-item" role="presentation">
      <a class="nav-link" id="rank-tab" data-toggle="tab" href="#rank">
        Ranking table
      </a>
    </li>
    <li class="nav-item" id="achievements-item" role="presentation">
      <a class="nav-link" id="achievements-tab" data-toggle="tab" href="#achievements">
        Achievements list
      </a>
    </li>
  </ul>
</div>

Upvotes: 1

Views: 67

Answers (1)

BenM
BenM

Reputation: 53198

The first "C" in "CSS" is for "cascading", meaning that subsequent, more specific styles will be applied to an element. You could refactor your CSS as follows:

.nav {
  width: 100%;
}

.nav-item {
  width: 30%;
  text-align: center;
  margin-left: -2.5%;
  clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
}

#progress-item {
  clip-path: polygon(90% 0%, 0% 0%, 0% 100%, 100% 100%);
  margin-left: 0;
}

.nav-link {
  background-color: #F3F4F5;
  color: black;
  font-family: "Times New Roman", Times, serif;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item" id="progress-item" role="presentation">
      <a class="nav-link" id="progress-tab" data-toggle="tab" href="#progress">
        Overall progress
      </a>
    </li>
    <li class="nav-item" id="rank-item" role="presentation">
      <a class="nav-link" id="rank-tab" data-toggle="tab" href="#rank">
        Ranking table
      </a>
    </li>
    <li class="nav-item" id="achievements-item" role="presentation">
      <a class="nav-link" id="achievements-tab" data-toggle="tab" href="#achievements">
        Achievements list
      </a>
    </li>
  </ul>
</div>

Upvotes: 3

Related Questions