How to use data-attribute in CSS in different property than 'content'

Question

I have following HTML code:

<ul data-links="6">
    <li><a href="settings/_users.php">Users</a></li>
    <li><a href="settings/_flows.php">Flows</a></li>
    <li><a href="settings/_file_syncing.php">File syncing</a></li>
    <li><a href="settings/_profile.php">Profile</a></li>
    <li><a href="settings/_billings.php">Billings</a></li>
    <li><a href="settings/_notifications.php">Notifications</a></li>
</ul>

and simplified version of CSS:

ul { 
    width: 600px; 
    height: 100px;
    list-style: none;
    padding: 0; margin: 0;
    border: 1px solid #000;
}

li {
    float: left;
    width: calc(600px / 6); /* yes, it gives 100px */
    height: 100px;
}
li:nth-child(2n) {
    background: rgba(0,0,0,0.25);
}

Here's demo.

Depending on user's role I show only some of the <li> elements on this list, so it's not always 6 of them. I can show "data-links" attribute with actual number of list elements I show to user. Anyway, the thing is that I want to make it flexible, that's why I used calc() for setting <li> width. So probably you already know what I'm trying to have: instead of showing there a number I want do something like this:

width: calc(600px / attr(data-links));

Yes, I know this is wrong becuase IF I ever wanted to use attr() in CSS it would get this attribute from this specific element, not from parent as in my example above. However I just wanted to show you what I'm trying to achieve. Obviously I can have data-links attribute on every <li> element instead of <ul> but this is clearly less clean solution (and btw. doesn't work as well)

Can you use JavaScript? Or does it have to be only CSS? – May 17 '14 at 05:18 — , May 17 '14 at 05:18

score 2 · Answer 1 · answered May 17 '14 at 05:25

2

Okay, you don't even have to use calc(); with my below method, see your updated DEMO HERE

ul {
    width: 600px;
    height: 100px;
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #000;
    display: table;
    table-layout: fixed;
    /* this ensure equal width */
}
ul > li {
    display: table-cell;
    border: 1px dashed red;
    text-align: center
}

answered May 17 '14 at 05:25

Godinall

2,280
1
13
18

Yes, this could be done like that, it's true. This basically solves my problem :). Still, I'm wondering if there's any way for using `data-attribute` in CSS in different property than 'content' – Paweł May 17 '14 at 05:34
1

@PawełLudwiczak unfortunately only content is well supported for now, if you do prefer to use other attributes you have either to wait for updates or use javascript. For pseudo elements they work better. – Godinall May 17 '14 at 05:37
@PawełLudwiczak and one more thing, The presence/absence of a particular data attribute should not be used as a CSS hook for any styling. Doing so would suggest that the data you are storing is of immediate importance to the user and should be marked up in a more semantic and accessible manner. – Godinall May 17 '14 at 05:42

How to use data-attribute in CSS in different property than 'content'

1 Answers1