This is my current style:
#detailTable4 tbody tr td:last-child {
background-color: #7E0303;
}
I want to apply this style to all elements with #detailTable (regardless of the index at the end). Can I achieve this using just CSS?
This is my current style:
#detailTable4 tbody tr td:last-child {
background-color: #7E0303;
}
I want to apply this style to all elements with #detailTable (regardless of the index at the end). Can I achieve this using just CSS?
To target elements with an ID that starts with a specific value, you can use the id attribute selector as shown in the example below. The [id^="detailTable"] selector will select any element whose id begins with detailTable.
[id^="detailTable"] tbody tr td:last-child {
background-color: #7E0303;
}<table id='detailTable1'>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
<table id='detailTable2'>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
<table id='detailTable4'>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
<table id='detailTable-abcd'>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>Implementing CSS using id starting with selector:
[id^="infoContainer"] article section div:last-child {
color: #2A9D8F;
}
[id$=productTable] tbody tr td:last-child {
background-color: #1A3F52;
}
After struggling through the implementation of excanvas on ie8, I managed to sort out the dynamic element issue. The once hidden elements are now rendering properly throughout most of the app, but just when it seemed like all was going well, another proble ...
My Bootstrap 4 Navbar has a "Logout" button on the left side that appears too wide when the navbar is collapsed. How can I adjust the size of the "Logout" button when the navbar is collapsed? <!doctype html> <html lang="de"> <head> ...
Currently, I am experimenting with REACTJS to build a basic app featuring Transitions. In my project file, I have imported CSSTransitions and Group Transition. However, when attempting to implement CSSTransition for specific news items, the animations are ...
Currently, I am in the process of creating a unique jQuery plugin that enables users to instantly delete records within a table. One key feature I would like to implement is changing the background-color of the deleted row to red and then smoothly sliding ...
I have a div element that I would like to customize the text selection style for. Currently, setting the style using CSS works perfectly: <div>Text text here</div> <style> div::selection { background: #FFF; color: #0 ...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" crossorigin="anonymous"> <body> <div class="container"> <div class="row"> <div class="col-md-6 col-xs-12"> ...
Utilizing bootstrap version 5.2.3 I'm facing a challenge not with bootstrap itself, but rather my limited comprehension of the flex system and overflow. Displayed below is a scenario where the first div has a fixed height of 100vh. My goal is to kee ...
I'm struggling to achieve the desired hover state because there are two states triggered due to the link being inside the div button! Intended Unhovered State - Unexpected Hovered State - Desired Hovered State - HTML - <li> <div id= ...
I stumbled upon a parallax website that incorporates multiple plugins (along with Wordpress - unfortunately) and functions perfectly on desktops. However, when viewed on a mobile device or in Device Mode using Chrome Inspector, scrolling gets disabled. Eve ...
I am currently using CSS to make part of my text bold, but I only want a specific portion of the line to be bold. How can I achieve this effect without making the entire line bold? Check out my code below: HTML <div> <div id="titleLabels"> ...
When a web page is loaded within a frame, not all of its styles are applied. The specific stylesheet used for the div elements is as follows: div.super{ position:absolute; font-family: Helvetica; font-size: 0.75em; padding:4px; overflo ...
I'm attempting to extract the text 'My name is' from this code snippet. Since the actual text may vary, I am unable to rely on it in the element locator. <span class="tabComboBoxName" id="tab-ui-id-1607647" aria-hidden ...
I am currently working on a project where I want to limit the width of my website to only part of the screen. Here is a basic idea of what I am trying to achieve: http://prntscr.com/nq83xo I have attempted using flexbox and adjusting the body width, but s ...
I am looking to create a layout with a variable number of columns using row span. Specifically, I want 3 columns on XS, 2 columns on SM (with the first 2 columns stacked on top of each other), and 3 columns on LG. I am unsure how to make the row span respo ...
I'm looking to have a menu on the right side of my page. It looks good on mobile view with the menu aligned to the left and white space on the right. However, on desktop view, I want the menu to be aligned to the right with white space on the left. Ho ...
I am in need of an uncomplicated way to visually represent events taking place around the globe. This involves creating a 2D image of a world map, along with a method to show visual alerts when events occur at specific geographical coordinates [lat, lng]. ...
I created a jsfiddle on http://jsfiddle.net/hxsy6/ The problem I'm facing is that when printing the page in IE7, the bullet points are printed with the actual bullet image. However, in IE8/9, they do not print. If I go to Print Preview -> click th ...
I am facing an issue where I am attempting to center a group of fluid thumbnails, but they are always aligning left instead of center. Can someone help me with this problem? To better illustrate the problem, here's the JSFiddle link: http://jsfiddle. ...
I currently have a bootstrap-4 column setup that looks like this: <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-4">A</div> <div class="col-xs-6 col-sm-4"& ...
Having trouble with a Bootstrap 5 accordion header that has an icon drop-up menu. The bottom border disappears under the icon and I can't figure out why? HTML <div class="w-50 mt-5 mx-auto"> <div class="accordion favorites-f ...