How to override a 's CSS when loaded by ajax?


Tags: css

Problem :

I have here an example where you can click on a row and it inserts a new row right underneath. The new row consists of a new table.

See fiddle

As you can see from the fiddle above, there is a hover over CSS in place for each table separately. The problem is now that the hover over from the parent table covers the second table.

enter image description here

I rather would like to override the hover over effect from the parent table when hovering over the new row, so that I can see the hover effect of the sub table instead:

enter image description here

I tried to prevent parent's table CSS to be applied on the new row like this:

table.cb_table-hover tbody tr:hover td:not(.override),
table.cb_table-hover tbody tr:hover th:not(.override){
      background-color: #cfe2e8;  
}

As you can see in this new fiddle:

However the results are not as I expected. What could I be missing? Thanks



Solution :

Try this.

CSS

table.cb_table-hover > tbody > tr:hover > td:not(.override),
table.cb_table-hover > tbody > tr:hover > th:not(.override){
  background-color: #cfe2e8;  
}

let me know if this helps you.

I have just added > to target direct child


    CSS Howto..

    How to start Bootstrap carousel with the first image at each occurrence of a modal window? [closed]

    how to float the section tags in html5

    How to make css border like this? [closed]

    How to use HTMLElement.classList(.toggle)?

    How do I style the asp.net membership control with css?

    how to prevent link padding during hover from extending paragraph padding

    How to access css selector properties after getting access to selector

    JS/CSS. How do I force a child div to the bottom of it's parent div

    How to put borders to
  • onclick in css Tabs
  • How to add shadow 'wings' to a centered content div

    How to mark up a tiled layout with CSS?

    Coming from Android XML layouts, how to place web page elements in XHTML?

    How can I archive this responsive design?

    How to hide specific TD borders in a TABLE using CSS

    In GWT, how can I override DisclosurePanel's CSS using or ClientBundle

    CSS: How to position child divs in main div side by side

    How to style Repeater item background color ontap?

    how does the jquery resultview on Airbnb Search Page work?

    Text is too close to scroller. How to create a little bit space between scroller and text?

    How to animate a div to move from end to end infinitely

    How to center a div horizontally in a table using CSS

    How to use min-width for “float:right” element in CSS?

    How to set CSS attributes relative to a parent node?

    How to write function in css

    How do I change the css of a different element on hover?

    How do i position a div relative to the window page (responsive css)

    (jQuery) How to animate the elements inside a scrollable div when they come into sight on scroll?

    how can I set my gradient background in css for full width and height of the page?

    CSS HTML : stumped on how to center this piece of text

    CSS selectors: how to make element hovering change wrapper's style