Ways to prevent background replacement in CSS

Recently I came across this snippet of code:

.active {
background-color: black;
color: white;
}
span {
margin: 10px;
}
a {
text-decoration: none;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.tabButton {
margin: 2px;
padding: 5px 10px;
border: 1px solid black;
cursor: pointer;
background-color: white;
}
#shop, var {
font-style: normal;
}
button {
font-size:15px;
margin :3px;
}
<!DOCTYPE HTML>
<!--
                     Idle RPG
                    ==========
               Copyrigh Az 2016
               Inprise by Candy Box and A Dark Room
               If you have interest in making more games like this, join my Studio :D
               Studio Group: https://az-gamestudio.slack.com
-->
<!--
HEY! YOU'RE LOOKING AT THE SOURCE CODE! cheater ;)
You're gotta go through ME, the DEVELOPER if you want to change the CODE!!!! MUAHAHAHAHA
You're not going to past this laser! It burns every thing it TOUCH!!!


      im one of the player. I tried to cheat but i can't just walk past this laser :( 
   \o/
|/=======================================================================\|
WHAT!! YOU JUST WALK PAST IT????
UNFAIR!!
Be careful, don't cheat too much...
My code is too easy to change sooooo....
"You made the developer bored. He gave up."
-->
<HTML style="font-family:sans-serif">
<head>
<title>Idle RPG</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<script src=Scripts/gameScript.js> </script>
<link rel="stylesheet" href=Scripts/pageStyle.css>
<body>
<div id='tab' style="text-align: center;">
<a href="index.html">
  <button class='tabButton active'>Treasure room</button>
</a>
<a href="inventory.html">
  <button class='tabButton'>Inventory</button>
</a>
<a href="map.html">
  <button class='tabButton'>Map</button>
</a>
<a href="quest">
  <button class='tabButton'>Quest</button>
</a>
</div>
<p id="numberOfCoins">You got 0 coin</p>
<p id="numberOfGolds">You mined 0 gold</p>
<button id="get1Coin" onclick="addCoins()">Collect a coin.</button>
<button onclick="throwCoins()">Throw 10 coins away.</button>
<button style=display:none id="add10Coins" onclick="add10Coins()">Get 10 coins.</button>
<br>
<div style=float:right; id="resources">
<form>
  <fieldset>
    <legend id="resource"><h3>RESOURCES</h3></legend>  
    <span>Iron: <var id='numberOfIrons'>0</var>
    <br><br>
    <span>Silver:  <var id='numberOfSilver'>0</var>
    <br><br>
    <span>Coal:  <var id='numberOfCoal'>0</var>
    <br><br>
  </fieldset>
</form>
</div>
<div id="goldMine">
    <pre style= border: 3px solid black>
_GOLD MINE_       _IRON MINE_       _GOLD MINE_       _IRON MINE_
|         |       |         |       |         |       |         |
|         |       |         |       |         |       |         |
    </pre>
</div>
<div style=display:none id="shop">
<pre>
<h2>SHOP</h2>
"Hi, im a blacksmith. I see you have a lot of coins, so i think that you might be interest in my weapons!"
Buy a item to unlock a new item!
<div id='woodenSword'>
Wooden Sword    
   .
  / \
  | |
  | |
  |.|
  |.|
  |:|
  |:|
'--8--'
   8
   O
Cost: 2000 coins    
<button id="buyWoodenSword" onclick='boughtWoodenSword();' disabled>Buy</button>
</div>
<div id='ironSword'>
Iron Sword
   .
  / \
  | |
  | |
  |.|
  |.|
  |:|
  |:|
 _|*|_
\--+--/
   8
   8
   O
Cost: 50 Golds
<button id="buyIronSword" onclick="boughtIronSword();" disabled>Buy</button>
<div>
</pre>
</div>
</HTML>

The issue lies with my "Treasure room" button(the blank button) not displaying the correct styles of black background and white text as intended. It seems like the class .tabButton is overriding the styling from the .active class. Can anyone offer some assistance on resolving this? Thank you!

htmlcss

Answer №1

There are several strategies you can employ to prioritize your CSS for the .active class.

  1. Add another class to the same element. In other words, replace .active with .tabButton.active.
  2. Declare the CSS for .active after the CSS for .tabButton.
  3. Utilize the direct child (>) operator to specify it. This means replacing .active with #tab a>.active
  4. Add !important at the end of the CSS rules for .active

Here is a functional snippet where only the first line in your CSS has been modified.

.tabButton.active {
background-color: black;
color: white;
}
span {
margin: 10px;
}
a {
text-decoration: none;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.tabButton {
margin: 2px;
padding: 5px 10px;
border: 1px solid black;
cursor: pointer;
background-color: white;
}


#shop, var {
font-style: normal;
}
button {
font-size:15px;
margin :3px;
}
<!DOCTYPE HTML>
<!--
                     Idle RPG
                    ==========
               Copyrigh Az 2016
               Inprise by Candy Box and A Dark Room
               If you have interest in making more games like this, join my Studio :D
               Studio Group: https://az-gamestudio.slack.com
-->
<!--
HEY! YOU'RE LOOKING AT THE SOURCE CODE! cheater ;)
You're gotta go through ME, the DEVELOPER if you want to change the CODE!!!! MUAHAHAHAHA
You're not going to past this laser! It burns every thing it TOUCH!!!


      im one of the player. I tried to cheat but i can't just walk past this laser :( 
   \o/
|/=======================================================================\|
WHAT!! YOU JUST WALK PAST IT????
UNFAIR!!
Be careful, don't cheat too much...
My code is too easy to change sooooo....
"You made the developer bored. He gave up."
-->
<HTML style="font-family:sans-serif">
<head>
<title>Idle RPG</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<script src=Scripts/gameScript.js> </script>
<link rel="stylesheet" href=Scripts/pageStyle.css>
<body>
<div id='tab' style="text-align: center;">
<a href="index.html">
  <button class='tabButton active'>Treasure room</button>
</a>
<a href="inventory.html">
  <button class='tabButton'>Inventory</button>
</a>
<a href="map.html">
  <button class='tabButton'>Map</button>
</a>
<a href="quest">
  <button class='tabButton'>Quest</button>
</a>
</div>
<p id="numberOfCoins">You got 0 coin</p>
<p id="numberOfGolds">You mined 0 gold</p>
<button id="get1Coin" onclick="addCoins()">Collect a coin.</button>
<button onclick="throwCoins()">Throw 10 coins away.</button>
<button style=display:none id="add10Coins" onclick="add10Coins()">Get 10 coins.</button>
<br>
<div style=float:right; id="resources">
<form>
  <fieldset>
    <legend id="resource"><h3>RESOURCES</h3></legend>  
    <span>Iron: <var id='numberOfIrons'>0</var>
    <br><br>
    <span>Silver:  <var id='numberOfSilver'>0</var>
    <br><br>
    <span>Coal:  <var id='numberOfCoal'>0</var>
    <br><br>
  </fieldset>
</form>
</div>
<div id="goldMine">
    <pre style= border: 3px solid black>
_GOLD MINE_       _IRON MINE_       _GOLD MINE_       _IRON MINE_
|         |       |         |       |         |       |         |
|         |       |         |       |         |       |         |
    </pre>
</div>
<div style=display:none id="shop">
<pre>
<h2>SHOP</h2>
"Hi, im a blacksmith. I see you have a lot of coins, so i think that you might be interest in my weapons!"
Buy an item to unlock a new item!
<div id='woodenSword'>
Wooden Sword    
   .
  / \
  | |
  | |
  |.|   
  |.|   
  |:|   
  |:|   
'--8--'
   8   
   O
Cost: 2000 coins    
<button id="buyWoodenSword" onclick='boughtWoodenSword();' disabled>Buy</button>
</div>
<div id='ironSword'>
Iron Sword   
   .
  / \
  | |
  | |   
  |.|   
  |.|   
  |:|   
  |:|   
 _|*|_  
\--+--/  
   8   
   8   
   O
Cost: 50 Golds
<button id="buyIronSword" onclick="boughtIronSword();" disabled>Buy</button>
<div>
</pre>
</div>
</HTML>

Answer №2

To quickly address this issue, consider adding .tabButton before .active in your CSS:

.tabButton.active {
background-color: black;
color: white;
}
span {
margin: 10px;
}
a {
text-decoration: none;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.tabButton {
margin: 2px;
padding: 5px 10px;
border: 1px solid black;
cursor: pointer;
background-color: white;
}
#shop, var {
font-style: normal;
}
button {
font-size:15px;
margin :3px;
}
<!DOCTYPE HTML>
<!--
                     Idle RPG
                    ==========
               Copyrigh Az 2016
               Inprise by Candy Box and A Dark Room
               If you have interest in making more games like this, join my Studio :D
               Studio Group: https://az-gamestudio.slack.com
-->
<!--
HEY! YOU'RE LOOKING AT THE SOURCE CODE! cheater ;)
You're gotta go through ME, the DEVELOPER if you want to change the CODE!!!! MUAHAHAHAHA
You're not going to past this laser! It burns every thing it TOUCH!!!


      im one of the player. I tried to cheat but i can't just walk past this laser :( 
   \o/
|/=======================================================================\|
WHAT!! YOU JUST WALK PAST IT????
UNFAIR!!
Be careful, don't cheat too much...
My code is too easy to change sooooo....
"You made the developer bored. He gave up."
-->
<HTML style="font-family:sans-serif">
<head>
<title>Idle RPG</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<script src=Scripts/gameScript.js> </script>
<link rel="stylesheet" href=Scripts/pageStyle.css>
<body>
<div id='tab' style="text-align: center;">
<a href="index.html">
  <button class='tabButton active'>Treasure room</button>
</a>
<a href="inventory.html">
  <button class='tabButton'>Inventory</button>
</a>
<a href="map.html">
  <button class='tabButton'>Map</button>
</a>
<a href="quest">
  <button class='tabButton'>Quest</button>
</a>
</div>
<p id="numberOfCoins">You got 0 coin</p>
<p id="numberOfGolds">You mined 0 gold</p>
<button id="get1Coin" onclick="addCoins()">Collect a coin.</button>
<button onclick="throwCoins()">Throw 10 coins away.</button>
<button style=display:none id="add10Coins" onclick="add10Coins()">Get 10 coins.</button>
<br>
<div style=float:right; id="resources">
<form>
  <fieldset>
    <legend id="resource"><h3>RESOURCES</h3></legend>  
    <span>Iron: <var id='numberOfIrons'>0</var>
    <br><br>
    <span>Silver:  <var id='numberOfSilver'>0</var>
    <br><br>
    <span>Coal:  <var id='numberOfCoal'>0</var>
    <br><br>
  </fieldset>
</form>
</div>
<div id="goldMine">
    <pre style= border: 3px solid black>
_GOLD MINE_       _IRON MINE_       _GOLD MINE_       _IRON MINE_
|         |       |         |       |         |       |         |
|         |       |         |       |         |       |         |
    </pre>
</div>
<div style=display:none id="shop">
<pre>
<h2>SHOP</h2>
"Hi, im a blacksmith. I see you have a lot of coins, so i think that you might be interest in my weapons!"
Buy a item to unlock a new item!
<div id='woodenSword'>
Wooden Sword    
   .
  / \
  | |
  | |
  |.|   
  |.|
  |:|
  |:|
'--8--'
   8
   O
Cost: 2000 coins    
<button id="buyWoodenSword" onclick='boughtWoodenSword();' disabled>Buy</button>
</div>
<div id='ironSword'>
Iron Sword
   .
  / \
  | |
  | |
  |.|   
  |.|
  |:|
  |:|
 _|*|_
\--+--/
   8
   8
   O
Cost: 50 Golds
<button id="buyIronSword" onclick="boughtIronSword();" disabled>Buy</button>
<div>
</pre>
</div>
</HTML>

Alternatively, you may opt to use an !important rule for your background-color property like so:

.active {
    background-color: black !important;
    color: white;
}

However, I highly recommend sticking with the first solution provided.

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

The AngularJS directive seems to be having trouble receiving the data being passed through its scope

Check out this HTML code snippet I created: <div ng-controller="ctrl"> <custom-tag title = "name" body = "content"> </custom-tag> </div> Take a look at the controller and directive implementation below: var mod = angular.mod ...

javascripthtmlangularjs

Having trouble getting the Bootstrap navbar mega menu to function properly on an Asp.Net Core platform

I attempted to incorporate a Bootstrap navbar mega menu dropdown into my layout using the code from this source: However, after downloading and inserting the code into my layout, the mega menu does not expand or take any action when clicked. In the Chrome ...

javascripthtmlcssasp.net-corebootstrap-4

Displaying HTML widget in an external browser using R

Is there a way to directly display an HTML widget (such as one created by dygraphs) in an external browser like Chrome? Saving the widget, creating an HTML page, linking it to the widget, and using browseURL could be an option, but I am looking for a more ...

htmlr

What is the solution to fixing the error message "SyntaxError: missing ) after argument list" in JavaScript?

I wrote some code in HTML/JavaScript/PHP, and in the 3rd echo statement, I added a button that calls the deleteAttribute() function when clicked. However, I encountered an error at the 3rd echo statement with (type = "button"): "Uncaug ...

javascriptphphtml

JavaScript Character Set on the Dynamic Page in Delphi

Within my Delphi application, I am dynamically generating HTML content. Displaying UTF-8 encoded strings in the webpage body is not an issue for me as I use HTMLEscape to encode regular strings (ensuring all strings in the list are properly escaped). The ...

javascripthtmldelphiutf-8delphi-xe

HTML combined with the Internet Explorer versions 6, 7, 8, and 9 can result in a div element that

My HTML code includes a <div>Some text</div>, and I am looking to ensure it is unclickable (allowing elements under the div to be selected instead), unselectable (preventing users from selecting text inside the div), while still being visible.. ...

javascripthtmlcssinternet-explorer

Ensuring that the carousel images maintain a consistent size when switching between images

Issue with Carousel I have been struggling with a carousel feature on my website. Despite following the code provided on the Bootstrap website, I am facing an issue where the height and width of the entire div change when loading the next image. I have tr ...

htmlcsstwitter-bootstrap-3bootstrap-4

Horizontal rule located within a table but spanning the entire width

I wrote the following code: <table> {item.awards.map((obj,i) => <tbody> <tr> <td>Name</td> <td>:</td> <td>{obj.title}</td> </tr> ...

javascripthtmlcssreactjs

The TypeAhead feature fails to display any search results for the entered query

Feeling really desperate right now! I'm facing a frustrating issue with Bootstrap Typeahead. Here is the HTML Markup: <div class="form-group"> <label for="">Recipients</label> <input id="recipients" name="recipients" ...

javascriptphphtmlmysqlbootstrap-typeahead

Retrieve data from an Observable containing JSON objects

I am currently working with a Http request that returns Json data, which I then store in an observable. { "proyecto":{ "nombre": "Mercado de Ideas", "tecnologias": [ { "nombre": ".NET", "icono": "http://getsetwebsit ...

htmlangularjsjsonionic2observable

Arranging elements on a website using CSS styling

I'm interested in creating a button <Button id="Button" text="Hey" />. I would like to know how I can position it on a webpage exactly where I want it, rather than it just appearing randomly without content. ...

htmlcss

I have organized two <h4>, <img>, and <p> tags into individual <div> elements. To prevent overlap, I floated the image and used <br> tags to create separation between the <div> elements. However, they still overlap despite these efforts

Arranging two h4, img, and p tags within separate <div> elements, I attempted to use float for the image and tag for separation. However, they are still overlapping. https://i.sstatic.net/SUxli.png Here is the image displaying the issue. I' ...

htmlcss

Issue with jQuery: Changes are not being triggered and clicks are also not working

I managed to recreate the modifications of my complex script in a simple jsfiddle, which can be found here. Below is the code I am working with locally: HTML <input type="text" id="rangeStart" value="updateMe" /><br/> <input type="text" c ...

javascriptjqueryhtmlclick

"Learn how to properly load the style.css file from the root directory into your WordPress page.php and single.php files

Having an issue with my WordPress theme. The style.css stylesheet does not seem to be loading in the page.php contents. I noticed that when I add <div class=w3-red"> <button class="w3-btn w3-red"> and other related codes while editing a post in ...

phpcsswordpressthemeswordpress-theming

Having trouble with changing images or background images in JavaScript?

Encountering issues with dynamic elements. When I click a button, the following JS function is executed. It displays a stylish CSS alert upon postback and then runs the function. function scrollToTop(sender, args) { window.scrollTo(0, 0); document. ...

javascriptjquerycssimage

The mysterious height phenomenon when setting the width of a list item with jQuery

Consider a basic ul and li setup similar to this: <div id="middle"> <ul> <li> <a> bridal </a> </li> //.... </ul> </div ...

jqueryhtmlcsscross-browser

Align text to the left and right with a centered div

Visualize the asterisk * at the center of the div textAlignRight * text AlignLeft This is essentially my goal to accomplish <center> <span class="left_host">Right aligned</span> * <span class="righ ...

htmlcss

Expanding divisions vertically without the constraints of fixed heights

Instead of resorting to fixed heights and absolute positioning with top: and bottom:, I'm challenging myself to find a CSS solution without using those methods. I want to explore different ways to solve this problem and enhance my skills. I have a st ...

htmlcss

Splitting the div into two columns

I've encountered various solutions to this issue, but when I integrate an Angular2 component inside the divs, it fails to function properly. Here is my progress so far: https://i.stack.imgur.com/qJ8a9.jpg Code: <div id="container"> <div ...

javascriptcssangular

The website functions properly with Live Server, but encounters issues when launched from the Files directory

After testing multiple browsers, the site consistently works fine with Live Server. However, when accessed through Firefox or Chrome, my style.css fails to load completely. On Edge, an error message indicates that the file is missing. Below are snippets of ...

htmlcssfilebootstrap-5liveserver