Override CSS class

Question

I have a CSS class in my code that overrides a class of one specific library. Using this I'm able to override .libraryclass.libraryclass-something with one specific image

#myobject .libraryclass.libraryclass-something {
    background: url("../../../images/Image1") no-repeat 0 0;    
}

Now I have to use a condition in my JS but in case to use Image1 I need to use Image2. I can create another class similar to the first one pointed to Image2 but I don't know how to do it because I always need to override the class .libraryclass.libraryclass-something.

Let's say in my JS file.

If (a===1) {
    #myobject .libraryclass.libraryclass-something
}
else {
    ??? (because I need to respect the same name...)
}

You could create 2 new classes and add them to the element(s) you want to have your images. — litelite
– litelite, Commented Aug 11, 2015 at 20:05

Zsw · Accepted Answer · 2015-08-11 20:10:09Z

1

You can create something like this.

#myobject .libraryclass.libraryclass-something.two {
    background: url("../../../images/Image2") no-repeat 0 0;    
}

This will still override .libraryclass.libraryclass-something, but you can add a .two to make it display Image2 instead.

answered Aug 11, 2015 at 20:10

Zsw

4,1174 gold badges32 silver badges44 bronze badges

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

Comments

King Size · Accepted Answer · 2015-08-11 20:20:25Z

0

2 steps to do this:

Create a new class with just the differences/additions of the existing class. In your case, you want to change the background so create a new class with the new background.
Write script as you are doing now and add this new class to your element. Snippet from your question:
```
else {
$('#myobject .libraryclass.libraryclass-something').addClass('newclass');
}
```

answered Aug 11, 2015 at 20:20

King Size

3821 silver badge6 bronze badges

Comments

Rachel Gallen · Accepted Answer · 2015-08-11 20:48:14Z

0

If you are using jQuery you could use the switchClass method

e.g. (from jquery docs)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>switchClass demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <style>
  div {
    width: 100px;
    height: 100px;
    background-color: #ccc;
  }
  .big {
    width: 200px;
    height: 200px;
  }
  .blue {
    background-color: #00f;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>

<div class="big"></div>

<script>
$( "div" ).click(function() {
  $( this ).switchClass( "big", "blue", 1000, "easeInOutQuad" );
});
</script>

</body>
</html>

answered Aug 11, 2015 at 20:48

Rachel Gallen

28.7k22 gold badges77 silver badges87 bronze badges

1 Comment

Rachel Gallen Over a year ago

or look at this answer stackoverflow.com/a/21771135/1675954 might need tweaking

Collectives™ on Stack Overflow

Override CSS class

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related