Is there a way to prevent the CSS selector ".a.b" from targeting ".a.b.c"?

Recently, I came across some coding that looks quite similar to the html snippet provided below. 

<div class="a b">how_can_i_select_ab_only</div> 
<div class="a b disabled">how_can_i_select_ab_and_disabled_only</div>

My goal is to individually select both of these elements.

The css selector .a.b currently selects both divs

  • <div class="a b">how_can_i_select_ab_only</div>
  • <div class="a b disabled">how_can_i_select_ab_and_disabled_only</div>

I am searching for a selector that targets only class a.b.disabled and only class a.b exclusively. What would be the correct syntax for this?

htmlcss

Answer №1

Here are three methods to accomplish this:

The initial method involves applying styles to .a.b and then overriding them for .a.b.disabled.

.a.b {color: red;}
.a.b.disabled {color: grey}

Click here for a live demo.

The second approach utilizes the attribute selector.

[class='a b'] {color: red}

Check out the demo here.

Lastly, you can leverage the :not selector, but keep in mind that it is only supported from IE9 onwards.

.a.b:not(.disabled) {color: red}

View the demonstration on this link.

Answer №2

The :not() function can be utilized for:

.x.y:not(.hidden) {
  background-color: green;
}
<div class="x y">how_to_style_xy</div> 
<div class="x y hidden">how_to_style_xy_and_hidden</div>

Answer №3

To apply styles to elements that do not have a specific class, utilize the :not() CSS selector.

.element.one:not(.inactive)

Answer №4

Give this a shot,

this will focus on div with class x AND inactive

.x.inactive {}

this will target div with class x AND y

.x.y {}

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

Retrieve the data value from a click event using the class identifier

The following code will display the correct class name, but not the correct data-validamount. It will only show: undefined. $(".prod_amount_add").click(function(){ var rowAmount = 0; var datavalid = $(this).attr('data-validamount'); ...

javascriptjqueryhtml

Video tag with centered image

For a current project, I am in need of rendering a centered image (a play button) at runtime on top of a video based on the UserAgent. If the userAgent is not Firefox, I want to display the image as Firefox has its own playEvent and button on top of the vi ...

javascripthtmlcssvideo

Calculate the total of the smallest values in three columns as they are updated in real-time

I'm facing an issue with dynamically adding the sum of the 3 lowest values entered in columns. The Total Cost Field is not displaying any value, and changing the type from number to text results in showing NaN. I've tried various approaches but h ...

javascriptjqueryhtml

Clearing Time Field Input in Safari

Recently, I've been utilizing the following HTML input element: <input type="time"> While testing it in both Chrome and Safari, I noticed that the clear field (cross button) is absent when using Safari. How can I make the cross button appear i ...

javascripthtmlsafari

TroubControls not functioning properly in ThreeJS when using import map

Looking for assistance in setting up a simple ThreeJs with OrbitControls for pan and zoom. I successfully got it working with an older version (128), but encountering issues with the newer r168. In my example, I am attempting to directly embed the JavaScr ...

javascripthtmlthree.js

The Angular 5 animations enter transition successfully performs (void => state) but encounters issues with the leave transition (state => void)

Currently tackling a challenge in Angular 5 where I am trying to build a custom carousel image browser from scratch. The goal is to allow users to navigate through images by clicking or swiping to view the next or previous image. The animations for the :e ...

cssangular

What is the best approach for promoting reusability in Angular: creating a new CSS class or a new component?

I have a div with a set of CSS properties that are essential to my application. These properties will be reused across multiple pages and components. <div style="display: flex; flex-direction: column; height: 100%"> //inner html will vary based on c ...

htmlcssangularangular8

Instructions for developing an HTML element slider using mouse dragging

I've come across plenty of slider plugins that either only allow clicking to view the next image, or if they do support mouse drag or touch capabilities, they are limited to images. Does anyone know of a plugin or method to create a mouse drag slider ...

javascriptjqueryhtmlcssweb-applications

HTML - Transforming JSON data into a table

I'm having trouble converting JSON data into a table format. Although everything seems to be in order, I am unable to view the values on my table. Here is the code I am using to convert JSON to a table: $(function() { var my_data = &ap ...

javascriptjqueryhtmljsonajax

Swap a jQuery class with another if the class for ul li is currently active

I am currently developing a form builder and I would like to customize the appearance, specifically changing the color of the text. I want the text to be white when the class is set to active, and black when the class is not active. Is there a way to achi ...

javascriptjquerycss

JavaScript unable to dynamically change CSS styles

I've been struggling to get the color updates working for a while now. My suspicion is that my string return may be invalid, causing the issue. I'm aiming to convert hours, minutes, and seconds into hexadecimal values, but it seems to be failing ...

javascripthtmlcsshex

Incorporate a vertical scrollbar in the tbody while keeping the thead fixed for smooth vertical scrolling

I'm seeking a solution to implement horizontal and vertical scroll for my table. Currently, the horizontal scroll is working fine, but when trying to add vertical scroll, the table header also moves along with it. Is there a way to keep the table hea ...

javascriptjqueryhtmlcssscrollbar

Tips for embedding a hyperlink in your HTML website

While I've mastered adding images to my HTML website, there's one thing that still eludes me despite scouring numerous online resources. I recently created a small animation using JavaScript on a different IDE, and I have the link to my output: ...

javascripthtmlcss

Is there a way to activate the action in a form's drop down list without using a button?

<form id="form1" name="form1" method="post" action="foo.php"> sort by: <select onchange="this.form.submit()"> <option value="date">sort by date</option> <option value="name">sort by name</option> <option va ...

phphtml

CSS responsive design: concealing elements does not prevent the page from being displayed

Imagine a scenario where I need to display a template in two different versions based on the user's device. For instance, I have utilized the following code: <div class="desktop"> <body> Hi Desktop user </body> </div> ...

javascripthtmlcssresponsive-design

What is the process for creating a clickable file upload in Angular?

Currently, I am utilizing the instructions found in this guide to implement a file upload feature in my project. The code provided works perfectly: <input type="file" class="file-input (change)="onFileSelected($event)" #fileUplo ...

javascripthtmlangulartypescript

Exploring the Intersection of Windows 8 Store Applications and jQuery: Leveraging MSApp.execUnsafeLocalFunction

Developing a Windows 8 JavaScript Store App (using Cordova) has led to some complications when using jQuery. It seems that in order to utilize certain functions, I have had to modify the jQuery library by adding: MSApp.execUnsafeLocalFunction While this ...

javascriptjqueryhtmljquery-mobilewindows-8

Import the CSV file and store it in a designated directory using JQuery

My goal is to enable users to upload a CSV file from an HTML page and have it saved to a specified local directory upon upload. Two possible scenarios could unfold: if the uploaded file already exists, it should be overwritten; otherwise, a new file shoul ...

javascriptjqueryhtmlajaxdom

Is it possible to engage with a local webpage using an application and receive real-time feedback?

I am interested in finding a way to connect my local HTML page with my C++ application. Similar to using the JavaScript console to make real-time edits to a webpage, like this: document.getElementById('divlayer').style.visibility = 'hidden& ...

javascriptjqueryc++htmlajax

Ways to conceal CSS on the page when triggering a different element

I am trying to achieve the functionality of hiding the black arrow when clicking on the green arrow, all without using jQuery. Here is my fiddle: http://jsfiddle.net/t5Nf8/195/ html: <div class="arrow-down"></div> <div class="arrow-up"> ...

javascriptcss