Setting Background Color for a Specific Tab in CSS

Question

Setting Background Color for a Specific Tab in CSS

HTML

<div class="woocommerce-tabs wc-tabs-wrapper">
   <ul class="tabs wc-tabs">
       <li class="paym-plans_tab">
          <a href="#tab-paym-plans">Contract Deals</a>
       </li>
          <li class="simfree-plans_tab active">

CSS

#tabs ul.wooTabs li a.selected, #tabs ul.tabs li.active a, .woocommerce_tabs ul.tabs li.active a, .woocommerce-tabs ul.tabs li.active a {
    background: #52b9e9 none repeat scroll 0 0;
    color: white;
}

Seeking to modify the background color and text color of specific WooCommerce tabs with class .paym-plans_tab active and .simfree-plans_tab active to #52b9e9 and white respectively when the tab is selected. Currently, the provided CSS affects all tabs. Is there a way to target only the tabs I want?

html css wordpress woocommerce

Answer 1

Answer №1

If I have comprehended your question accurately, you simply require something along the lines of the following:

.wc-tabs .active a {
    background: #52b9e9 none repeat scroll 0 0;
    color: white;
}

Naturally, your framework should apply the active class to a tab when clicked, and remove it from the previously active tab.

Answer 2

If I have comprehended your question accurately, you simply require something along the lines of the following:

.wc-tabs .active a {
    background: #52b9e9 none repeat scroll 0 0;
    color: white;
}

Naturally, your framework should apply the active class to a tab when clicked, and remove it from the previously active tab.

Answer 3

Answer №2

please take a look at this link

.payment-plans_tab {
  background-color: #52b9e9;
  color: white;
  }

.payment-plans_tab > a {
  color: white;
 }

.simfree-plans_tab > a {
   color: white;
  }


a:hover {
 background-color: red;
}

.simfree-plans_tab {
  background-color: #52b9e9;
  color: white;
 }

Answer 4

please take a look at this link

.payment-plans_tab {
  background-color: #52b9e9;
  color: white;
  }

.payment-plans_tab > a {
  color: white;
 }

.simfree-plans_tab > a {
   color: white;
  }


a:hover {
 background-color: red;
}

.simfree-plans_tab {
  background-color: #52b9e9;
  color: white;
 }

Setting Background Color for a Specific Tab in CSS

Answer №1

Answer №2

Similar questions

PHP Implementing real-time dynamic categories

Ways to retrieve JSON data through multiple levels of nested if statements

Tips for capturing audio on a smartphone browser?

Switch up the Background using .css and jCarousel

How can I convert dates into a different format?

Creating a diverse layout by dynamically adding divs without achieving uniformity in the grid

Fill in input field based on choice from the drop-down menu - JavaScript

Is there a way to adjust the image opacity of a background using Material UI?

Organize images with overlays to the center of the page

Switch between dynamically generated div elements

Using routerLink for linking to multiple components

Update overall font size to be 62% for a consistent look across the website

Discovering the current page using ons-navigator in Onsen UI

The website is plagued by the presence of unwanted hyperlinks

Having EventListeners set up across a single CSS class returns null when applied to different types of elements simultaneously

Optimal method for streaming and viewing an mkv video captured with ffmpeg in a web browser

The function has exceeded the time limit of 60000 milliseconds. Please make sure that the callback is completed

The navigation bar seems to be missing from the page

Eliminate the Div Attribute once the radio button is activated

CSS to Reverse Align Navigation Bar Text