Styling based on a custom data attribute in CSS

Imagine having a snippet of code in your HTML file that looks like this:

<div data-v="20px">
    <p>this text repeats itself over and over again</p>
</div>

The width of the <div> should match the value of data-v, as seen below.

div { width:[data-v]; }

Although using [attribute] as a selector is an option, it's not the most practical approach:

div[data-v=1px]{ width:1px; }
div[data-v=2px]{ width:1px; }
div[data-v=3px]{ width:1px; }
div[data-v=4px]{ width:1px; }
div[data-v=5px]{ width:1px; }
div[data-v=1px]{ width:1px; }
div[data-v=1px]{ width:1px; }
        (...)

Any suggestions for improvement?

Edit

I stumbled upon a potential solution to this issue on Stack Overflow

csshtmlattributes

Answer №1

If you're looking for the simplest solution, using jQuery would be the way to go.

Check out this Fiddle.

$("div").each(function() {
    var w = $(this).data("w");
    var $this = $(this);

    $this.width(w);
});​

As mentioned in the comments, achieving this with just CSS is not possible.

Answer №2

It appears that setting a fixed width in the HTML might not be the most flexible approach. Consider utilizing a style attribute instead:

<div style="width:20px">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

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

How to utilize CSS variable references across different files in React?

In my React project, I have integrated multiple variables that I would like to be able to access from other CSS files in order to maintain a unified codebase for specific UI configurations such as colors and buttons. However, I am uncertain whether these ...

cssreactjs

Having trouble retrieving data from the fetch database. The login page seems to be stuck in a continuous loop and won't let me

Every time I attempt to log in through: webhost/adminlogin.php, I am redirected back to the same page. Did I forget to add something? Thank you for your assistance. Here is my script: This is what is included in my adminlogin.php file: <?php session ...

phphtmlmysqlmysql-error-1064

confirmation message upon completing a form submission

<script> var remainingCredit = document.getElementById("cor_credit"); var remaining = document.getElementById("remain_credit"); function validateForm() { if (remaining.value < remainingCredit.value) { return conf ...

javascripthtml

Ways to integrate an HTML document into a Python tkinter GUI window

I'm looking to integrate my HTML webpage project into a Python Tkinter window using Tkinter HTML view. However, when attempting to do so, the end result in the Python Tkinter window looks like this: what I'm getting. Contrary to that, here is wha ...

javascriptpythonhtmltkinter

Select a dropdown menu option in Cypress by clicking on it only if it is checked

In this html code snippet, I have multiple elements within a dropdown menu. I am looking for a way to click on an item only if it is selected (has the class selected) or has a check mark in front of the name, as shown in this screenshot. How can I achieve ...

javascripthtmlautomationcypress

Transforming the indicator of the React responsive carousel to full-width rectangles

I am working on customizing the indicators to appear rectangular and cover the full width based on the length of the images, similar to this example: https://i.sstatic.net/j4yov.png However, I am currently facing an issue where the divs are always displa ...

cssreactjscarousel

The Angular boilerplate and Twitter Bootstrap 3 make for a powerful combination in

I've been attempting to integrate Twitter Bootstrap 3 into this project found at https://github.com/ngbp/ngbp, but I haven't been able to find any information on how to do so. Could it be that: It's simply not possible It's not recomm ...

javascripthtmlangularjstwitter-bootstrap

Utilizing CSS for creating dynamic columns within a Bootstrap row

Is there a way to dynamically change the background color of each section in a bootstrap row based on percentages passed through? For example, if I pass in percentages of 30, 40, 20, and 10, the divs should appear in green, red, yellow, and purple respecti ...

cssangulartwitter-bootstrap-3less

Utilize the float left and float right properties within a div container with a width of 100% to ensure compatibility

I need to align two divs within a container-div in IE7. The first div should float to the left, and the second to the right. Currently, both divs are floating to the left according to my CSS configuration. Here is the CSS code I'm using: .container ...

cssinternet-explorer-7floating

Incorporating live text into a tag while arranging items by price in both ascending and descending order

I recently added a button to my online shop that allows users to sort products by price, even though I don't fully understand the underlying JavaScript code. I want to enhance this button by updating the text to indicate whether the sorting order is ...

javascripthtmljquerysorting

What is the best way to confirm checkbox selection based on MySQL data?

Writing this question feels challenging, but I have a collection of checkboxes with their data stored as JSON in my PHP database. What I'm trying to achieve now is to dynamically load the JSON data on the page without refreshing it, checking specific ...

javascriptphphtmlajax

Retrieve the text input from its respective radio button

There are two radio buttons, each accompanied by an input text field. When a user selects a radio button, they can also enter some corresponding text. My inquiry is: What is the best method to retrieve the entered text for the selected radio button? ...

javascriptjqueryhtml

Scrollbar customization in a div container

I find myself in a dilemma. I need to create a div content with a scrollbar that looks similar to the design shown in an image. After researching, I only came across one solution that seems suitable: jQuery custom content scroller. However, it appears to ...

jquerycsshtmlinterfacescroll

Is it possible to find a program that can extract information from a Hotmail webpage, such as the number of unread messages?

Does anyone know of a script that can be used to extract simple data from the hotmail/live mail web page? It doesn't matter what programming language it's in, but it would be best if it can run on Linux. This is because hotmail doesn't offer ...

htmlscriptingemaillivehotmail

Is jQuery the solution for tidying up messy HTML code?

Is there a way to clean up this markup using jQuery? <span style="font-size:19px"> <span style="font-size:20px"> <span style="font-size:21px"> Something </span> </span> </span> I'm looking to tra ...

jqueryhtml

Align a component vertically in a FlexBox using Material UI

I have a React app where I created a card with specified min width and height, containing only a header. I want to add flexbox that occupies the entire left space with justify-content="center" and align-items="center". This way, when I insert a circular pr ...

cssreactjsflexboxmaterial-ui

How can line breaks be displayed in JavaScript text output?

I need assistance with creating a scrolling series of text messages that are separated by linebreaks. This is the current code I have: <script type="text/javascript" src="xbMarquee.js"></script> <script type="text/javascript"> <!-- ...

jqueryhtmlline-breaks

What could be the source of this margin or spacing?

Within this test, I have noticed that there are 2 inline flex containers. Specifically, I am referring to the test scenario that states Next The flex containers are laid out inline. Despite the fact that there is some space between the containers, upon in ...

htmlcssflexbox

Leveraging clojurescript for displaying a Three.js scene on an HTML webpage

I'm currently working on incorporating the example for creating a scene in three.js using clojurescript. My aim is to display the static scene (which consists of a green block) without any animation. The issue seems to be with the function responsib ...

htmlthree.jsclojurescript

Styling your text: Choosing the right font for an online editing tool

In the process of creating a web-based code editor, I have currently implemented the following rule for both line numbers and the source code: font-family : "Courier New", Courier, monospace I have a couple of questions regarding this choice: Will this ...

cssfonts