How to remove class using CSS

Question

I need to remove classes from different elements within the @media print on my CSS and add those classes on the @media screen.

Is there anyway to remove classes from the CSS file?

Something like:

@media print{
    .element{/*Remove class*/}
}
@media screen{
    .element{/*Add class*/}
}

I need to remove ui-tabs-hide added by a jQuery function (which hides the element in a weird way, as its not display:block or display:none) class from those elements at the time of printing and putting it back when finished printing.

Why not try :not ... check w3schools.com/cssref/sel_not.asp — KingRider
– KingRider, Commented Aug 9, 2016 at 14:35

Quentin · Accepted Answer · 2010-11-18 13:51:02Z

46

No. CSS can't modify the DOM, only its presentation.

answered Nov 18, 2010 at 13:51

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Quentin Over a year ago

Include the CSS for all media in a stylesheet for media=all. Include the CSS for screen only in media=print. Include the CSS for print only in media=print.

Amra Over a year ago

What javascript will detect when is printing and when has finished printing?

Kyle · Accepted Answer · 2010-11-18 13:52:29Z

6

CSS can't take out elements from the HTML document, however you could try something like:

@media print{
element.relevantclass
   {
     display: none;
   }

This would tell the printed media to not display this element.

answered Nov 18, 2010 at 13:52

Kyle

67.5k28 gold badges148 silver badges153 bronze badges

3 Comments

Amra Over a year ago

That won't work as the element its hidden using a class from jquery, I think it is ui-widget, therefore display:none or display:block will not affect to it.

Felix Kling Over a year ago

@Cesar Lopez: So you need to remove the classes such that jQuery does not apply any function on them?

Amra Over a year ago

Yes I need to remove ui-widget class from those elements at the time of printing and putting it back when finished printing.

Arsal Hussain · Accepted Answer · 2016-11-07 12:11:30Z

4

you can use jQuery to do this.

$(<element>).removeClass() // or removeClass(<the class to be removed>)
$(<element>).addClass(<new class>)

if you want to do this on loading of the page, you can include this in the document ready function (as shown below)

$( document ).ready(function() {
    $(<element>).removeClass()
    $(<element>).addClass(<new class>)
});

edited Nov 7, 2016 at 12:11

Arsal Hussain

306 bronze badges

answered Sep 26, 2013 at 2:15

Achintha

514 bronze badges

Comments

djvg · Accepted Answer · 2023-05-18 14:46:10Z

This does not help the OP, but could be useful to others who end up here based on the title "How to remove class using CSS".

Although it is not possible to remove the actual class from the DOM using CSS, as mentioned by Quentin, in some cases it may be possible to remove the styles applied by the class, using e.g. revert or unset (possibly in combination with all:).

Here's an example that styles an anchor as a button on touch devices, but removes that style if a mouse is available:

.button-anchor {
  /* example of a class that modifies many properties */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.5em;
  background-color: steelblue;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

@media (pointer: fine) {
  .button-anchor {
    all: revert;
  }
}

<a class="button-anchor" href="">click me</a>

Note: use your browser's "responsive design mode" to toggle touch function.

Shadman Fatin · Accepted Answer · 2023-06-22 02:40:56Z

0

You can't remove a class using CSS but you can override the properties.

answered Jun 22, 2023 at 2:40

Shadman Fatin

3092 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to remove class using CSS

5 Answers 5

2 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related