Can an ID tag be used to dynamically change CSS content?

Is there a way to extract the IDs from HTML

example:

 id="title1"

so it can be used to display content in the CSS.

    <table class="layout display responsive-table">
        <thead>
            <tr>
                <th class="th" id="title1">Title12</th>
                <th class="th">Title2</th>
                <th class="th">Title3</th>
                <th class="th">Title4</th>
            </tr>
        </thead>


table.responsive-table td:nth-child(1):before {
        content: use the ID here;
    }
    table.responsive-table td:nth-child(2):before {
        content: 'Title 2';
    }

Answer №2

Achieving this with jQuery is entirely possible. Give it a shot!

$(document).ready(function(){
  $("#title1").text();
})

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

Prevent horizontal HTML scrolling while displaying a layer

I am currently working with a .layer div element that darkens the page to highlight a modal. However, I have encountered an issue where upon triggering the event, the div does not occupy 100% of the screen and the original browser scroll bar disappears. I ...

Tips on creating a line break within a text box

There is a gap between the text boxesIn the first row, I used text boxes with labels. When I use a text box with a label, the text box is attached to the text box in the first row. I tried using a break line but in mobile view, there is a gap showing be ...

Converting hierarchical JSON data into a table with rowspan using Angular

I am facing a challenge in creating a table using nested JSON obtained from an API. I am unsure how to dynamically merge cells when needed, especially since the JSON structure can be nested up to 6 or 7 levels. Desired Table : Expected Table Current Ou ...

Submitting quiz responses through a PHP based form

I am currently facing an issue with integrating forms and a quiz on my website. Individually, both work fine but when combined, they do not function as expected. Specifically, the quiz itself operates correctly, however, it fails to send the results via P ...

What is the best way to position an image alongside an h2 heading?

Perhaps the technology stack is not relevant in this case, but I am currently working on a nextjs project with tailwind for styling. I am attempting to place an image next to an h2 tag, but encountering unexpected behavior from the image. It seems as thoug ...

A handy feature of HTML5 is the dataset attribute, which

Is there a way to restrict the height of the dataset dropdown list in HTML? When using <input list="datalist"> with numerous elements, some might not be visible. Is it possible to limit the size of the list and enable vertical scrolling to display al ...

Which specific CSS rule is responsible for the issue I am currently experiencing?

I have styled a left-hand border on items in a list, with the border-left-color set to transparent for all of them. The active item, marked by the css class "active day", has a specific color for its border. Below is a snippet of the code (certain styles h ...

Broken link in navigation bar

I encountered an issue with the navigation bar on this website. When I click on "Leistungsspektrum" in the navigation bar, it returns a message stating that The requested URL /leistunsspektrum.html was not found on this server. However, the actual file nam ...

Utilizing Twitter Bootstrap to populate form fields from a dropdown selection

I am currently using twitter bootstrap for my front end web development project. I have successfully implemented a text field with a dropdown menu right next to it: <div class="input-group"> <input type="text" class="form-control" name="ope ...

Converting table data to JSON using JavaScript, including rows for "parent" and "children."

To create a JSON object by selecting values from multiple rows of a table using checkboxes, follow the structure below. The parent row, identified by the class 'primary color,' will be included in the JSON, along with the selected child rows. The ...

A step-by-step guide to creating a CSS menu using pure HTML markup

I have been working on the CSS for a menu using some HTML code, but I am stuck and uncertain about my next steps. Here is the CSS I have added so far: #menu-my-integra, ul.sub-menu { list-style: none; padding: 0; margin: 0; } #menu-my-integra li ...

What is the best way to fit the text into a DIV row as efficiently as possible?

Looking for a solution to prevent a span from dropping down to the next line when text is too long within a fixed width and height row. The row consists of three elements, two with fixed widths and the third containing a span and text. Constraints include ...

Including the HTML Doctype to center child elements within the <td> tags specifically for Internet Explorer

This issue seems to be isolated to Internet Explorer. I have conducted tests using IE7, IE8, and IE9. Interestingly, when I remove the html doctype, the td tags are aligned to the left. However, upon adding any standard HTML4 or 5 tags, the text and input ...

Javascript - When I preview my file, it automatically deletes the input file

My form initially looked like this : <form action="assets/php/test.php" method="post" enctype="multipart/form-data"> <input type="hidden" name="MAX_FILE_SIZE" value="1000000" /> ...

Trouble Arising from the Lack of Coordination Between CSS Transition and JavaScript Update Triggered by Element

I'm currently working on a web development project that involves a list of clickable elements. When one of these elements is clicked, it should become active and trigger a CSS transition (such as a transform) with a duration of 200ms. Additionally, I ...

I'm struggling to locate the space that should be between these elements

After accidentally starting in quirks mode without declaring a doctype, I realized my mistake and corrected it by declaring a doctype. However, there is a persistent issue with a space between .car-box-img and car-box that I can't seem to locate in t ...

Highest Positioned jQuery Mobile Section

Requesting something a bit out of the ordinary, I understand. I currently have a jQueryMobile page set up with simplicity: <div data-role="page" class="type-home" id="home"> <div data-role="header" data-theme="b"> <h1>Our To ...

Duplicate numerous Td elements

I am trying to manipulate a table with 3 columns and 6 rows by copying the contents of certain cells into a newly created column, inserting them in the middle of the table. Here is the desired outcome: https://i.sstatic.net/RVTfV.png This is the approach ...

.displaying a grid of div elements is not functioning as expected

On a single page, there is a grid of Divs (2 by 3) with a menu (<li> in <lu>) positioned to the left of the grid. Each menu section contains its own grid of divs, all enclosed within one main div to facilitate manipulation. Menu Sections: < ...

What is the best way to highlight the active link in my sidebar navigation bar when using material design in an Angular application?

<div class="mt-3"> <mat-nav-list> <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'> SERVICES </a> <a mat-list-item class="ml-2" style="font-size:15px;" (click ...