#MyTable tr+tr:hover {
background: #dfdfdf;
}<table id="myTable">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>X</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>X</td>
</tr>
</table>Successfully achieved hover effect on rows 2 and 3, but looking for a way to bypass the (X) cells when hovering over them without relying on jQuery selectors.
When styling a table, you can utilize the CSS selectors :not(), :first-child, and :last-child.
#myTable tr:not(:first-child):hover td:not(:last-child) {
background: #dfdfdf;
}
To see these selectors in action, check out this demo.
If you want to exclude certain styles from the first and last children, you can utilize the :first-child and :last-child selectors in your CSS.
#MyTable tr, tr:hover {
background: #dfdfdf;
}
#MyTable tr:first-child, tr:last-child {
background: #000;
}
Please note that this may not be supported in Internet Explorer until IE 9.
Alternatively, you can add support by using polyfills like Modernizr.
After encountering an issue with my header row highlighting on hover, I sought out a solution on Stack Overflow. My workaround involved utilizing <thead> and <tbody> tags and applying CSS to the rows within <tbody>.
<style>
.report tbody tr:hover {
background-color: khaki;
}
</style>
<table class="report">
<thead>
<tr>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
</tr>
</tfoot>
</table>
:not(:first-of-type) and :not(:last-of-type) will likely work, as those selectors are compatible with most modern browsers.
For older versions of IE, consider adding classes or replacing td elements with th elements.
Just started exploring Angular and I've been struggling to customize the scrollbar on a PrimeNG dropdown. Does anyone have any tips or tricks to achieve this? Here is the HTML code: <p-autoComplete placeholder="- Select -" (onSelect)="onSelect(dh ...
For example, using `-webkit-text-fill-color` resulted in an error when setting it to `'red'`, stating "Using kebab-case for CSS properties in objects is not supported. Did you mean WebkitTextFillColor?" I have attempted `WebkitTextFillColor`, `w ...
Currently, I am facing a unique challenge while setting up a form using CSS tables. The issue is best explained through a fiddle: http://jsfiddle.net/GdgV4/6/ In the third row, you'll notice that adding an image with a height less than the input box ...
Is there a way to configure csslint in Atom to exclude "ids" and prevent the warning "Don't use IDs in selectors" from appearing? Update: Despite my question being flagged as potentially duplicate, I delved deeper in my own research and ultimately fo ...
I'm going crazy over this issue. My navigation bar has three div elements, each with text aligned both vertically and horizontally at the center. However, when I insert an image (an SVG icon of a zoom lens) before the "search" text, it shifts the tex ...
I am trying to replicate the layout of a Google search results page. My goal is to have a full-width div appear on screen when an image is clicked, with a small triangle at the bottom of the clicked image. I attempted to place the img inside another div, ...
I need assistance placing buttons in specific positions above an image carousel using HTML and CSS code. Despite researching various resources, I am unable to resolve this issue. This is the HTML implementation: <!-- Image where buttons should be placed ...
[http://jsfiddle.net/w7r3gveg/]1 I am looking to position 4 Facebook logos in the center bottom of my background image. The background is represented by the 'bg' div, while the Facebook logo is in the 'facebook' div. Currently, I can ...
Here is the HTML code I have: <div class='store_detail-level1'> <span class='book_name'>How To Avoid Climate Disaster</span> <br> <span class='author_name'>Bill Gates</span> < ...
I am currently facing an issue with appending a banner code to the end of a URL. The scenario is as follows: An individual receives an email with a link to a website (SITE1), where the URL includes a banner code, such as www.site1.com?banner=helloworld O ...
My goal is to have both the child-1 (blue) and child-2 (black) retain their original width when the sidebar appears by enabling horizontal scrolling upon clicking anywhere in the demo below. document.body.onclick = () => document.querySelector(&apos ...
I've been searching for a solution to show a submenu on hover by removing the hidden class that is hiding it. Despite trying various approaches, including using CSS and JavaScript, I haven't been able to make it work. Here is the code snippet I h ...
When utilizing the bootstrap CDN in conjunction with another bootstrap CSS example file located in the static directory, I encountered an issue while attempting to create a file input and submit button for a form. Despite my efforts, I was unable to adjust ...
I am facing a challenge in arranging my input fields within the form in a column of 3. The issue is that I have more code than anticipated, making it difficult to achieve this layout. Despite several attempts, nothing seems to be working. I have spent hour ...
I'm currently working on creating a grid layout that aligns with this wireframe design: https://i.sstatic.net/AdsMX.png Here is the markup I have implemented so far: <div class="grid"> <div class="spanWidth"> <img src="https:// ...
My HTML contains several <a> tags that have different images as backgrounds. I want these <a> elements to move across the page in an animated manner and have a grayscale filter applied to them. When hovered over, they should return to their ori ...
Within the code snippet below, you'll find an image located in the second column. Clicking on this second column should allow me to access the data stored in the first column. Let's say we have a table with 10 rows. If the user clicks on the ico ...
Introduction( kind of :) ) Starting with the process of generating 5 coffee beans for each cup of coffee. The coffee class includes a strength attribute, and my goal is to visually distinguish the coffee beans which have a strength greater than the select ...
My goal is to have a snippet of text, like "Lorem Ipsum..." slide horizontally into a colored DIV quickly, then smoothly come to a slow stop, continue moving slowly, speed up again, and exit the DIV - all while staying within the boundaries of the DIV. I ...
I have encountered a unique dilemma <div class="parent"> <p>stuff stuff stuff</p> </div> Using CSS, I set the width and height of parent = 0; because I intend to modify it when a button is clicked. However, for this purpose, I ...