CSS Deprecate Single Class When There Are 2 Classes

Creating a single disabled css class for multiple classes

This doesn't work because it means each class is a descendant of the previous:

.ghost-button .ghost-button-label .plus-circle-position .disabled {
    //CSS goes here
}

If you're trying to just select that one div with all four classes, just remove the spaces:

.ghost-button.ghost-button-label.plus-circle-position.disabled {
    //CSS goes here
}

If you're trying to select any elements that have the disabled class plus one of the three other classes, then you use commas to separate the different combinations:

.ghost-button.disabled,
.ghost-button-label.disabled,
.plus-circle-position.disabled {
   // CSS
}

Of course you could just select .disabled if you want this CSS applied to every element with the disabled class:

.disabled {
  // CSS
}

Just be sure to take into account View Encapsulation. You may need to put this CSS in the global style file styles.css if this class exists in more than one component.

---

Just a note, you are not setting the disabled state here, you are adding a class with the name "disabled". disabled is a boolean attribute you can set via HTML, which you can then select with the pseudo-class :disabled.

button:disabled {
  color: red
}

<button>Not Disabled</button>
<button disabled>Disabled</button>

How to apply two CSS classes to a single element

1) Use multiple classes inside the class attribute, separated by whitespace (ref):

<a class="c1 c2">aa</a>

2) To target elements that contain all of the specified classes, use this CSS selector (no space) (ref):

.c1.c2 {
}

How to remove one css class from div container with multiple elements and classes?

The issue is that getElementsByClassName is a live HTMLCollection. When an element no longer matches (because you've removed the class), it's removed from the collection:

const list = document.getElementsByClassName("example");console.log(list.length);       // 2console.log(list[0].innerHTML); // "A"list[0].classList.remove("example");console.log(list.length);       // 1console.log(list[0].innerHTML); // "B"

<div class="example">A</div><div class="example">B</div>

CSS rule to apply only if element has BOTH classes

div.abc.xyz {
    /* rules go here */
}

... or simply:

.abc.xyz {
    /* rules go here */
}

I need to add and remove 2 different classes to different elements with one click.-jQuery

So you have many .footer-icon and .footer-text pairs... And you want to set them as active on click of one of the other...

Try this:

// One click handler for both classes
$(".footer-icon, .footer-text").click(function(event){
  // Remove the two active classes everywhere
  $(".footer-icon").removeClass('footer-icon-active');
  $(".footer-text").removeClass('footer-active');
  
  // Depending which element was clicked
  // Add the active class to $(this)
  // and its corresponding prev or next sibling
  if($(this).is(".footer-icon")){
    $(this).addClass('footer-icon-active');
    $(this).next(".footer-text").addClass('footer-active')
  }else{
    $(this).prev(".footer-icon").addClass('footer-icon-active');
    $(this).addClass('footer-active')
  }
});

JavaScript CSS how to add and remove multiple CSS classes to an element

Try doing this...

document.getElementById("MyElement").className += " MyClass";

Got this here...

---

Related Topics