I'm looking to eliminate the redundant code within this CSS file

My CSS design for the three 'nav-item's requires me to have different styles for each one, making the code repetitive. Is there a way to streamline the code while keeping the unique design of the first 'nav-item'?

.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>

htmlcss

Answer №1

In the world of CSS, the first "C" stands for "cascading," which means that more specific styles will override general ones. To optimize your CSS, consider restructuring it as shown below:

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for creating two lines of text within one line using CSS

My explanation skills are not the best. I have the words "Tasty Burger" stacked on top of each other, but I want them to be on a single line. .footer-container { margin: 25px 0; display: flex; gap: 3rem; align-items: center; justif ...

htmlcssflexbox

Attempting to create a JavaScript class within an HTML document

Having an issue with instantiating a JavaScript class in a separate HTML file. The JavaScript class looks like this: class Puzzle { constructor(fenStart, pgnEnd) { this.fenStart = fenStart; this.pgnEnd = pgnEnd; } } module.exports = Puzzle; ...

javascriptjqueryhtmlnode.js

If the initial tab is not visible, activate the first tab that is currently visible

I need some assistance with jQuery UI Tabs. My menu includes 6 tabs, with the first tab always being "active." However, in some scenarios, one or more tabs may be hidden using "display: none;". Is there a method to identify the first visible tab and set it ...

jquerycssjquery-uitabs

Is there an equivalent HTML function in the R kernel that is similar to the display function

My ipython cell (python kernel) contains the following code: from IPython.display import display, HTML display(HTML("<style>.container { width:100% !important; }</style>")) By using this code, the notebook expands to full width when exported ...

htmlripythonwidthdisplay

Ways to position <label> and text next to each other in HTML

I have a query about aligning a label and text side by side horizontally. How can I adjust their alignment to center the text within the label rather than at the bottom of it? Below is my current HTML code: <div> <label class="switchnmn"> ...

htmlcss

Incorporating Images into a div programmatically in Asp.Net

I have successfully uploaded images using plupload and added them to a div container. Now, after performing some editing options in the code-behind, I need to re-upload the edited images back to the same div. Is it possible to do so? If yes, how can I mod ...

asp.netimagehtmldirectoryaddition

CSS drop down menu malfunctioning

Trying my hand at anchor tags and drop down menu. I'm encountering an issue in the code below - the dropdown doesn't seem to be working as intended. It should display the text "This is dropdown menu" directly beneath the text "This is text. Its i ...

htmlcss

What is the best way to align a container in the middle of the page without positioning the text in the center

Query 1: What is the best way to horizontally center the container div while keeping Typography aligned to the left? Expected outcome: https://i.stack.imgur.com/yKCZF.jpg Query 2: How can a component be positioned below the AppBar without relying on mar ...

cssflexboxmaterial-ui

Maintain HTML formatting when page is refreshed

I am new to HTML and JavaScript, and I'm trying to modify the JavaScript code below so that when I reload the page, it retains the most recent active tab instead of defaulting back to the first tab. Currently, if I click on the second tab for "Paris" ...

javascripthtmltabs

Managing traffic in Google Kubernetes Engine (GKE)

I am encountering an issue with our website deployment on GKE, which consists of 10 pods. When deploying a new version, we use MAXsurge=1 and MAXunavailable=0. Upon trying to access the website during a new deployment, I sometimes only see the header in t ...

javascriptcsskubernetesgoogle-kubernetes-engine

Tips for updating the date format in Material UI components and input fields

Is there a way to customize the date format in Material UI for input text fields? I am struggling to format a textField with type 'date' to display as 'DD/MM/YYYY'. The available options for formatting seem limited. It would be helpful ...

javascripthtmlcssreactjsmaterial-ui

Clone the "big" div element and insert data within it

Is there a way to dynamically generate div elements while looping through a JSON array? I have various data items that I need to display in separate thumbnails within a row. I am looking for a template structure like the following: for(var i = 0; i < ...

javascripthtmlangularjs

Is there a way to prevent my smartchatbox from covering my fixed top navbar?

Click here for more information I am seeking assistance. Your help is greatly appreciated. The question's heading reveals all you need to know. All you have to do is resize your browser, scroll down, and the answer will become apparent. ...

javascripthtmlchat

There seems to be an issue with the functionality of the dropdown option in my HTML when integrated with my PHP code. I have implemented POST as the retrieval method, but unfortunately, it is resulting in

Is the POST method not appropriate for gathering information about the Employees? I previously used this form with just name, email, and phone fields, and it worked fine. As a PHP beginner, I'm feeling a bit overwhelmed. I trimmed down the form to av ...

phphtmlposthttp-status-code-404

Place two divs side by side with the second div filling up the remaining space on the line

Hello there, can anyone lend a hand with this problem? This is the code I have been working with: <html> <body> <div style="width=100%"> <div style="float:left; background-color:Red; height:100px">Red</div> <div st ...

htmlcss

Issue with the Bootstrap carousel jQuery plugin

Hi everyone, I need some help with creating a multiple items bootstrap carousel. I keep getting an error message that says "#Carousel".carousel is not a function TypeError: "#Carousel".carousel is not a function. Can anyone guide me on how to fix this issu ...

javascriptjquerycsstwitter-bootstrap

HTML Data conflicts

Can anyone assist me in resolving my most recent issue with HTML and DataTables? I'm currently displaying a table with just two columns (name and local). I have included the necessary files (CSS and JS): <link rel="stylesheet" type="text/css" ...

javascripthtmlcssdatatables

Utilizing HTML to emphasize a section of text

Hey there! I have a question related to an image with unicodes. The letter featured in the image was written using unicode characters పా. I'm trying to highlight the white portion of the image, but simply replacing it with ా isn&apos ...

javascriptcsshtml

AngularJS's ng-repeat feature is not properly re-embedding tweets

In my project, I am utilizing angularjs to showcase tweets. The implementation involves using ng-repeat alongside a filter that is directly linked to the state of a checkbox. When the checkbox is checked, the filter returns all the tweets (the default beha ...

htmlangularjstwitter

Personalize the styling of Material UI Tables - final element customization

I've been attempting to adjust the padding of the Material UI Table. The last-child element is receiving a 24px padding which I'm trying to modify. Despite my attempts at overriding the theme and using classes{{root: classes.xxx}}, I haven't ...

cssreactjsmaterial-ui