how to style xml tag attribute with css

Tags: html,css,xml,attributes

Problem :

I'm trying to give style to a xml file that is displayed as a page, so far I could manage to give style to only the "start" attribute of the tag, but I need to style two more attributes: "end" and "n".

Currently I have:


#mtxt tok { font-size: 14pt; }
#mtxt u { display: block; text-decoration: none; margin-bottom: 10px; }
#mtxt u:before { content: attr(start); color: #999900; padding-right: 30px; font-size: 9pt; }
#mtxt l { display: block; }


<u n="1" start="00:00:23,912" end="00:00:26,540" id="u-1">
<tok id="w-1">Now we're reading from the letter of st. Paul</tok>

visualization: (kind of, for you to see more or less the result)

00:00:23,912 : Now we're reading from the letter of st. Paul

The visualization I'm trying to get is next one:

1) 00:00:23,912 - 00:00:26,540 : Now we're reading from the letter of st. Paul

Any Suggestions... thanks

Solution :

Something like this? Demo


u:before {
  content: attr(n) ') ' attr(start) ' - ' attr(end);
  color: #999900;
  padding-right: 30px;
  font-size: 9pt;

You can have multiple attr() inside. Just add a space inbetween. To add text, just wrap it in quotes.

    CSS Howto..

    How to Set custom text Color in QTextEdit?

    How to override background image defined in CSS with another CSS?

    How do I make a div link open in a new tab Javascript onClick="window.location

    How to to change CSS double class properties through script

    CSS how to get the: a img on top, insted of the first a href “”without floating

    I found another way of doing this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> ul {list-style: none; margin: 0; padding: 0;} li {position: relative; overflow: hidden;} a {display: block;}...
    Read more

    How to use css control to focus on div background when href link clicked

    How to use css to style xhtml markup made only of divs like a table [closed]

    How can I prevent this div in my table from increasing the cell height?

    How to override inline CSS (specifically a div with certain class) with external CSS?

    How can I set the text on the right of a glyphicon into a Twitter BootStrap theme?

    How to add and remove a current state to a link when another is clicked using jQuery

    How do I fit a fieldset to the size of its content with CSS?

    CSS Flex Box: How to vertically align “flex items” to middle without losing flex item height?

    How do you make a nav bar “sticky”?

    How to set stylesheet programmatically in an ASP.NET MVC 2 project?

    How to apply CSS changes for the last

    element of the 3rd div class span8

    how can I reload a “CSS background-image” each time I hover on it?

    How to extend a CSS/HTML content box to the bottom of browser/viewport window when other elements above it push it down?

    How can I customise jquery loupe to have a circular lens?

    How can I change GWT's widget CSS values?

    How to center a image with transparent background in css?

    How to Align a Link HTML/CSS

    How to position two
    elements side by side?

    While scrolling, The current div goes up, and another div under it (under the first div background) shows

    How to implement a webpage with tabs in my case?

    How to add CSS to an if else statement in PHP

    CSS - How to control the gap between background image and container

    How to make cards on the image

    How to make the gif photo to be same width as the table?

    How to align / valign css-rotated span within its parent div