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

The Google Share button may fail to be displayed correctly if it was initially hidden

Is there a solution to the issue where the Google Share button does not display properly when it is initially hidden using CSS display:none on its parent div and then shown using jQuery .show()? I am currently experiencing this problem and I'm unsure ...

jquerycssgoogle-plus

jQuery Mobile offers a feature that allows users to create collapsible elements

I recently ran a coding validation check at and encountered the following errors: <div data-role="collapsible-set" id="col"> <div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" class="ui-nodisc-icon"> ...

jqueryhtmlcss

How can you achieve a vertical list display for a label while preserving its inline-block properties?

I have chosen to use labels for my radio buttons because I enjoy the convenience of being able to click on the text to select the option. However, I want these labels to appear in a vertical list format. Currently, they are displaying as blocks, causing th ...

htmlcss

What is the process for moving a tap-target button with materialize css?

Looking for tips on how to relocate a tap-target button that's currently stuck in the bottom right corner of the screen. I've experimented with various methods like adjusting margins, padding, and even nesting it in an outer div, but nothing seem ...

cssmaterialize

Tips for marking a textarea as mandatory when a choice is made

I'm creating an .html document for conducting a complete system check and confirming various aspects of its functionality. In this page, there is a table within a form structure where each row represents a step in the system verification process (e.g. ...

javascripthtmltextareaselectionrequired

Clicking a button with Java Selenium

While trying to navigate all the pages on a website, I encountered an issue where after scrolling to the second page, I received an exception stating that the element does not exist on the page. Upon further investigation, I realized that the CSS selecto ...

javahtmlcssselenium

Changing color of the collapsible icon and content when hovered over

Currently, I am working on creating collapsible content for a FAQ dropdown. The button has a 'plus' icon which changes to a 'minus' icon when clicked. My goal is to change the color of the pre-clicked 'plus' icon to white when ...

htmlcssbuttoncollapsable

Creating a layout in jQuery Mobile with two HTML <input type="button"> elements positioned side by side and each taking up 50% of the screen

After trying numerous strategies, I am still struggling to place two buttons next to each other evenly: <input type="button" value="This week's Schedule" onclick= 'window.location.href = dic[current_sunday]' /> <input type="button ...

htmlcssjquery-mobile

Guide on implementing "Displaying 1 of N Records" using the dataTables.js framework

let userTable = $("#user_table").DataTable({ 'sDom': '<"row-drop"<"col-sm-12 row"lr>><"row"t><"row-pager"<"col-sm-12 col-md-5"i><"col-sm-12&qu ...

javascripthtmljquerydatatabledatatables

What is the best way to change the "MuiPaper-elevation1" attribute in a Card element within Material-UI?

My Card component in HTML looks like this: <div class="MuiPaper-root MuiCard-root makeStyles-Card-5 MuiPaper-elevation1 MuiPaper-rounded"> I want to change MuiPaper-elevation1 to MuiPaper-elevation0 to remove the shadow. I attempted: ...

javascriptcssreactjsmaterial-ui

The innovative technique of using pure CSS to secure the bottom edge of a div to the viewport

Is there a way to keep two container divs positioned x pixels from the bottom of the viewport without using position absolute|fixed? I want them to remain as position: relative for proper DOM flow. Searching for a CSS-only solution that works in IE7+. Mos ...

css

Localhost causing variations in CSS behavior

I've been working on a website and wanted to share it with someone, so I set up a webserver. However, I've encountered some peculiar behavior when trying to access the site via LAN rather than through my localhost. Firstly, when viewing the site ...

csslocalhostfont-face

Achieve a flat text indentation similar to an ordered list using CSS

Is there a way to format my FAQ Q & A like an ordered list? <div class="col-left"> <h3><strong>CAPTION</strong></h3> <ul> <li>Q: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspe ...

htmlcss

Having trouble with the repeat-item animation feature not functioning correctly

Take a look at this Plunker, where the animation for adding an item only seems to work properly after an item has been deleted from the list. Any suggestions on how to resolve this issue? Here is the CSS code: .repeat-item.ng-enter, .repeat-item.ng-leave ...

cssangularjsanimationangularjs-ng-repeatcss-animations

CSS: Avoiding text overflow in a div container

Utilizing Bootstrap 4, I have a div containing lengthy text that causes overflow within the element. The issue is depicted in this image example. By introducing spaces to shorten words, the text displays correctly without overflowing. However, extended ...

htmlcssbootstrap-4

Tips for capitalizing the first letter of a directory

I want to automatically convert all directories in the URI to lowercase if the user types them in uppercase. For example, https://example.com/hOmE should be converted to https://example.com/home. ...

html.htaccess

Tips for implementing ::before and ::after pseudo-elements within an anchor tag

Can you provide guidance on adding ::before pseudo-element inside an anchor tag? https://i.sstatic.net/tojNE.jpg ...

htmlcss

Converting a CSS Submenu from Horizontal to Vertical Orientation

Below is the current code snippet for my menu navigation bar: To access my live blog, please click on this link: www.4time2fun.com <div id="topmenu"> <div id="navigation"> <ul class="categories"> <li class="articles"> <a href ...

htmlcssdrop-down-menunavigationblogger

Trigger the onClick event of an element only if it was not clicked on specific child elements

<div onClick={()=>do_stuff()}> <div classname="div-1"></div> <div classname="div-2"></div> <div classname="div-3"></div> <div classname="div-4"></div> ...

javascripthtmlcssreactjsfrontend

Employ JQuery and Ajax to develop an autocomplete/suggestion feature that generates a list based on JSON data fetched from an API via PHP

I'm facing challenges in developing a dynamic auto-suggest feature for a search field using JQuery with data in JSON format. The JSON data is fetched from an API through PHP. The objective is to have the auto-suggest list update with each keystroke e ...

phpjqueryhtmljsonajax