When styled with an id, the DIV element does not inherit styles from a CSS class

I seem to be facing an issue with the code below, possibly due to using both class and id in the same div. Despite knowing they are meant to work together.

For more information: Can I use DIV class and ID together in CSS?

.PB {
  position: relative;
  margin: 0 auto;
  background-color: #000;
  width: 201px;
  height: 422px;
  z-index: 1;
}
#pb1-1 {
  position: absolute;
  margin: 0px;
  background-color: green;
  width: 65px;
  height: 98.5px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 2;
  text-align: right;
  font-size: 14px;
  -webkit-text-stroke: 1px white;
}
#pb1-2 {
  position: absolute;
  margin: 0px;
  background-color: yellow;
  width: 65px;
  height: 98.5px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 68px;
  z-index: 2;
  text-align: right;
  font-size: 14px;
  -webkit-text-stroke: 1px white;
}
#pb1-3 {
  position: absolute;
  margin: 0px;
  background-color: red;
  width: 65px;
  height: 98.5px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 136px;
  z-index: 2;
  text-align: right;
  font-size: 14px;
  -webkit-text-stroke: 1px white;
}
.pu:hover {
  font-size: 24px;
  background-color: #999999;
}
<div class="PB">
  <div id="pb1-1" class="pu">1&nbsp;</div>
  <div id="pb1-2" class="pu">2&nbsp;</div>
  <div id="pb1-3" class="pu">3&nbsp;</div>
</div>

Could someone please point out where my mistake lies?

htmlcssclass

Answer №1

To ensure your :hover CSS rules take precedence, it's important to use !important. This is because IDs have higher specificity than classes. For example:

.pu:hover {
    font-size:24px !important;
    background-color:#999999 !important;
}

Take a look at the revised code snippet below:

.PB {
  position:relative;
  margin:0 auto;
  background-color:#000;
  width:201px;
  height:422px;
  z-index: 1;
}

#pb1-1 {position:absolute; margin:0px; background-color:green; width:65px; height:98.5px; top:0px; right:0px; bottom:0px; left:0px; z-index:2; text-align:right; font-size:14px; -webkit-text-stroke: 1px white;}

#pb1-2 {position:absolute; margin:0px; background-color:yellow; width:65px; height:98.5px; top:0px; right:0px; bottom:0px; left:68px; z-index:2; text-align:right; font-size:14px; -webkit-text-stroke: 1px white;}
#pb1-3 {position:absolute; margin:0px; background-color:red; width:65px; height:98.5px; top:0px; right:0px; bottom:0px; left:136px; z-index:2; text-align:right; font-size:14px; -webkit-text-stroke: 1px white;}

.pu:hover {
  font-size:24px!important;
  background-color:#999999!important;
}
<div class="PB">
  <div id="pb1-1" class="pu">1&nbsp;</div>
  <div id="pb1-2" class="pu">2&nbsp;</div>
  <div id="pb1-3" class="pu">3&nbsp;</div>
</div>

I trust this explanation was beneficial!

Answer №2

The reason for the conflicting styles is that the IDs are taking precedence over the classes, even when using hover effects.

If you want to learn more about how CSS cascading order works, check out this link: https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

In your specific case, it's recommended to avoid using !important and stick to defining styles with classes only:

.PB {
    position: relative;
    margin: 0 auto;
    background-color: #000;
    width: 201px;
    height: 422px;
    z-index: 1;
}

.pu {
    position: absolute;
    margin: 0;
    width: 65px;
    height: 98.5px;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    text-align: right;
    font-size: 14px;
    -webkit-text-stroke: 1px white;
}

.pb1-1 { background-color: green; left: 0; }
.pb1-2 { background-color: yellow; left: 68px; }
.pb1-3 { background-color: red; left: 136px; }

.pu:hover {
    font-size: 24px;
    background-color: #999999;
}
<div class="PB">
    <div class="pu pb1-1">1&nbsp;</div>
    <div class="pu pb1-2">2&nbsp;</div>
    <div class="pu pb1-3">3&nbsp;</div>
</div>

Answer №3

You could experiment with pseudo classes

.PB {
    position: relative;
    margin: 0 auto;
    background-color: #000;
    width: 201px;
    height: 422px;
    z-index: 1; 
}

.pu {
    position: absolute;
    margin: 0;
    width: 65px;
    height: 98.5px;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    text-align: right;
    font-size: 14px;
    -webkit-text-stroke: 1px white;
}

.pu:nth-child(1) { background-color: green; left: 0; }
.pu:nth-child(2) { background-color: yellow; left: 68px; }
.pu:nth-child(3) { background-color: red; left: 136px; }

.pu:hover {
    font-size: 24px;
    background-color: #999999;
}

<div class="PB">
    <div class="pu">1&nbsp;</div>
    <div class="pu">2&nbsp;</div>
    <div class="pu">3&nbsp;</div>
</div>

Take a look here!

Answer №4

Simply add the <style type="text/css"> attribute and your issue should be resolved

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

Is it possible to animate multiple SVGs on a webpage with just the click of a button?

Is there a way to trigger the animation in the SVG each time a next/prev button is clicked while navigating through a carousel where the same SVG is repeated multiple times? The carousel is built using PHP and a while loop. jQuery(document).ready(function ...

javascriptjquerycssanimationsvg

Looking to extract latitude and longitude data using an Autocomplete Address Form

I am currently attempting to utilize Google Maps autocomplete feature in order to save latitude and longitude. Unfortunately, I am encountering difficulties in making this functionality work as intended. Given that I am unfamiliar with the Google Maps API, ...

phphtmllaravelgoogle-maps

Using -moz-transform CSS does not effectively prevent unwanted page breaks when printing in Firefox

I am facing a challenge with printing two tables, named header and details, on separate pages. The structure of the tables is as follows: <table id="header"> <!-- multiple rows here --> </table> <table id="details&quo ...

htmljquerycssfirefox

Problem with layout design (utilizing float properties)

I'm curious why the paragraph content gets sandwiched between two floated divs. I'd like the paragraph content to appear below the header. Also, why aren't the line breaks showing in the paragraph? Check out this JS Fiddle link for referenc ...

htmlcss

What circumstances could lead to Chrome's autofill feature ceasing to function?

Currently, we are in the process of developing a new website that utilizes HTML5. While everything validates correctly, we are encountering issues with the LESS stylesheets and Facebook tags. Particularly, Chrome's autofill feature is not functioning ...

htmlgoogle-chrome

How can I make the background of a button change when I move my cursor over it

Is it possible to change the background image of a button when hovering over it? Perhaps have the image transition from left to right for a fading effect? Can this be accomplished? ...

javascripthtmlcssbutton

Make the <textarea> occupy the entire available space

How can I make a <textarea> occupy all available space within a <td> element? Upon clicking inside the table cell, the <textarea> should display with precisely the same dimensions as the cell itself, resembling an Excel spreadsheet. I h ...

htmlcss

Ensuring the bootstrap footer remains anchored at the bottom of the page content

I've been struggling for 3 days to get the footer to stay at the bottom of my webpage content. I've searched through many similar questions, but still can't find a solution. Here is my code: .container{position:relative;} footer{position: ...

htmlcsstwitter-bootstrap

How to send the chosen option value from a select tag in Python Flask

My user registration form features a select tag, and I'm trying to assign the value of the selected option to a variable using the code below: registration.html <form method="POST" action="/register"> <div class="form-group"> ...

pythonhtmlflaskflask-wtforms

Displaying information from a database in an HTML form using PHP

Seeking assistance with managing data and populating: I'm in the process of creating an Employee database with two pages: 1. Add Employee 2. Modify Employee The "Add Employee" page requires input fields for EMP Name, EMP ID, Manager name (from a dro ...

phphtml

Is it feasible to generate emojis using a gulp Icon-font task?

I'm in the process of creating a script that can generate fonts from SVG images, and so far it's been successful (using similar code to what's provided on https://www.npmjs.com/package/gulp-iconfont) Now I have a more specific question - is ...

cssnode.jshtmlgulpicon-fonts

Revamp the button's visual presentation when it is in an active state

Currently, I'm facing a challenge with altering the visual appearance of a button. Specifically, I want to make it resemble an arrow protruding from it, indicating that it is the active button. The button in question is enclosed within a card componen ...

cssreactjstypescript

Using Masonry with AngularJS templates: A step-by-step guide

Hey there! I'm trying to incorporate masonry into my AngularJS project. I'd like the divs to flow from left to right within their container. The documentation suggests using the following code: <div class="js-masonry" data-masonry-options=&ap ...

htmlcssangularjsjquery-masonry

Repeatedly view the identical file on HTML

I'm currently working with the following HTML code: <input type="file" style="display: none" #file(change)="processImage($event)" /> <button type="button" class="btn" (click)="file.click()" Browse </button> When I select image1 fr ...

htmlangulartypescript

Trigger the phone to vibrate once the animation has completed. This feature will only activate upon clicking the button

After the image completes its animation by sliding in from the left, I would like it to vibrate for 2 seconds using the HTML 5 vibrate API: navigator.vibrate(2000); An on-click event successfully triggers the vibration when a button is clicked: <butt ...

jquerycsscss-animationsanimate.css

Unable to display Boostrap modal upon clicking href link

Can someone help me troubleshoot why my pop modal is not displaying after a user clicks on a specific link on my webpage? I have attempted the following: <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></s ...

javascripthtmlbootstrap-4

Listening for position changes using jQuery events

It is essential to be able to track the relative position of elements, especially when dealing with dynamic layout issues. Unfortunately, there are no built-in options in CSS to listen for changes in position() or offset() attributes. Reason: Changes in a ...

jquerycssposition

Animated CSS side panel

I'm currently working on creating an animation for a side menu. The animation works perfectly when I open the menu, but the problem arises when I try to animate it back closed. Is there a property that allows the animation to play in reverse when the ...

cssangularcss-animations

Utilizing ASCII art in React: A guide to incorporating textual designs into your

I'm having trouble displaying ASCII images correctly on my React app. I've tried various methods, but nothing seems to maintain the form when rendered in the browser. <Grid container id="terminal_banner"> <Grid item ...

javascripthtmlreactjsmaterial-uiascii-art

Emphasize certain VueJS elements for focus

Currently, I am working with a Vue file and I'm interested in highlighting the active element. Can you recommend the most efficient method to achieve this? <li @click = "selectedComponent = 'appBugs1'"><i class="ion-bug"></i& ...

htmlvue.js