Using HTML and CSS to selectively apply CSS styling based on certain conditions

Hey there, I'm currently facing an issue where I've tried multiple solutions but none seem to be working..

I have a scenario with two HTML divs

<div class="lmn-tab-item"></div>
<div class="lmn-tab-item lmn-tab-item-active active"></div>

Is it possible to apply CSS to the lmn-tab-item class if the div also contains the class lmn-tab-item-active? In other words, I want to set the default color for the first div as color:red and if the second div has lmn-tab-item-active, then set the color as color:green.

I attempted the following method:

div[class^="lmn-tab-item-active"][class*=" "]:before {
  color: green!important;
}

.lmn-tab-item {
  color: red!important;
}

Unfortunately, this approach is not producing the desired results. Any assistance would be greatly appreciated!

htmlcsscss-selectors

Answer №1

The question you've asked isn't entirely clear, but here is a suggested selector you can use:

.lmn-tab-item.lmn-tab-item-active {
   [insert your desired CSS settings here]
}

This selector will only take effect if an element has both of these classes applied to it. (important: no space between the classes!)

You can also apply the same concept with three or more classes.

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

Is it possible to automatically play a sound clip when the page loads?

Is there a way to automatically play a sound clip when my page loads? Are there any specific JavaScript or jQuery methods I can use for this, as I am developing my page using PHP. ...

javascripthtmlaudio

What is the process for aligning text with the margin on the left side

Inside a span block, there is an icon: <span><i></i>Text</span> The CSS for the icon is as follows: i { display: inline-block; width: 20px; height: 20px; } When the text inside the span is long, it wraps to the next lin ...

htmlcss

The padding on the button inside the v-card is not being applied as expected

I am facing an issue with the following code snippet: <v-card height="200"> <v-card-actions class="mb-0"> <v-btn flat color="orange">Share</v-btn> <v-btn flat color="orange">Explore</v-btn> & ...

javascriptcssvue.jsvuetify.js

Tips on effectively centering a wide div

After much experimentation, this is what I came up with: (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en ...

javascriptjqueryhtmlcss

transforming JSON information into tables on a webpage

Can someone help me with the challenge of incorporating a massive JSON file into an HTML table? I am encountering an issue where I continuously receive the error message Uncaught TypeError: v.forEach is not a function. Any guidance would be greatly appreci ...

javascriptjqueryhtmljsonforeach

Floating elements overlapping fixed elements

I am currently in the process of developing a mobile application and encountering an issue with relative divs overlapping the top and bottom headers fixed with a z-index. Despite my attempt to resolve this by adding a z-index to the relative div, the probl ...

htmlcss

Positioning pictures in front of a backdrop

I'm facing an issue with a section that slides into view with a blue background. I want to add a picture in the upper left corner, but it's barely visible and the blue background disappears. Here's a snippet of the HTML code: <header id ...

jqueryhtmlcss

Tips for creating improved CSS ID rules

Currently, I am in the process of learning HTML and CSS and have a question regarding writing rules for multiple IDs. Is it possible to write rules that apply to several IDs in order to achieve my desired outcome? <!-- language: lang-css--> #menu- ...

htmlcss

Unable to reach the top while perfectly centered

I am currently struggling to create a perfectly centered popup menu that allows me to scroll all the way to the top. It seems like the transform property only affects visuals, so even though #content is set to top: 50%, I can't see everything at the t ...

javascripthtmlcss

Positioning a floated element to align with its parent container

In the scenario of a div and a series of nested divs with float: left properties, how can you ensure that the right edge of the last div in the sequence remains attached to the right edge of the parent div even when the parent div's right edge moves? ...

htmlcss

Perform an action in Django when a button is clicked using HTML onclick event

How to integrate HTML form on Django to perform actions using buttons? Check out the HTML code snippet below: <form name="bookappointment" class="form" method="POST> {% csrf_token %} <br> <input type ...

pythonhtmldjangodjango-rest-frameworkdjango-forms

Failure to receive Ajax XML data in success callback

I am struggling to access the book.xml file that is located in the same folder as other files. Everything seems fine, but the ajax function refuses to enter the success state and instead shows an [object object] error message. The XML file is very simple, ...

javascriptjqueryhtmlajax

Creating a Modern Tooltip Menu with HTML, CSS, and Bootstrap

My goal is to design a menu that opens to the right, similar to a tooltip. I have experimented with different bootstrap techniques, but I am encountering difficulties in including HTML li elements within the tooltip. https://i.sstatic.net/mAHKS.jpg ...

jquerycsstwitter-bootstrap

JavaScript image search function within the existing page

Building a HTML website is new to me and I lack basic programming skills. I've uploaded 100 animated images to another server and linked them to my HTML website using code like this: <p> <img src="http://.../abc/23118465.gif" alt="teddy be ...

javascriptjqueryhtml

Tips for containing a moving element within the boundaries of its container div

I have a dynamic box placed inside another box, and I want to restrict its movement within the boundaries of the parent container. How can I achieve this? In simpler terms: I need the frog to stay within the frogger. HTML <div id="frogger"> ...

javascriptcssanimationhtml

Struggling with incorporating a Carousel feature while navigating through an array

I am struggling to properly implement a carousel using the data from my Videos Array. Instead of getting the desired output where videos should slide one by one, all the videos in the Array are being rendered at the same time. <div id="carouselEx ...

htmlcssreactjscarouselbootstrap-5

Is it possible to adapt Owl Carousel Liquid to function with percentages?

After successfully installing the owl carousel plugin, I noticed that it does not scale with the viewport size. This has been bothering me as I want the carousel to resize along with the items when the viewport becomes smaller. I attempted to set responsiv ...

jquerycssowl-carousel

Broken hyperlinks on images that have been crossfaded are causing issues

I am currently working on a unique design feature that involves 5 crossfading images with hover divs appearing above them. To achieve this effect, I have added link references to each image and set the CSS properties accordingly for smooth animation. In ...

htmlcss

Getting real-time comments after they have been submitted in ReactJS

Is it possible to dynamically display newly added comments in real-time without refreshing the page after submitting them to the database through an API? Here's a snippet of the code I currently have: const PostWidget = ({ post }) => { ...

javascripthtmlreactjs

The mobile navigation bar may not display correctly on certain iPhones and iPads

Currently using a custom theme on Prestashop 1.6 where minor changes have been made to the CSS file, focusing mostly on colors and fonts. Interestingly, the mobile menu functions flawlessly on Android devices that were tested. However, some Apple devices s ...

cssiphoneipadmenuprestashop