Displaying attribute values from XML on a webpage

I am currently working on displaying a complex XML document as a webpage in Firefox using a stylesheet. One of the challenges I'm facing is that within one of the tags, the content itself is included in the attribute value.

  <projectMember>
    <Role roleType="CHANGE ADMINISTRATOR III"/>
  </projectMember>
  <projectMember>
    <Role roleType="CHANGE ADMINISTRATOR I"/>
  </projectMember>

My goal is to showcase the value of roleType in Firefox using CSS selectors without resorting to XSLT or JavaScript, with modifying the XML source being a last-resort option.

cssxmlfirefoxrendering

Answer №1

You could utilize the "content" along with the attr css function.
For a similar solution demonstrating how to display the href of a link in print media, visit http://www.alistapart.com/articles/goingtoprint/ and navigate to the section titled "Printed links"

The final implementation may resemble the following:

 content: attr(roleType);

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

What are the steps to resolving the '1' issue in my restaurant.dtd.xml document?

Having trouble with XML Can anyone explain why this specific file is causing an error? file: restaurant.xml <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="restaurant.css"?&g ...

htmlcssxmldtdweb-development-server

Combining CSS Sprites with D3.js

I'm attempting to add HTML elements inside a <circle> and then utilize CSS-Sprites for styling, but I'm having trouble getting them to display! This is my current approach: //Creating the node for use in Force Layout var node = svg.sele ...

javascripthtmlcssd3.jscss-sprites

Is a CSS-only autoexpanding label possible within a list?

I am interested in having all the labels automatically expand to the size of the widest one. Below is the HTML structure: <div class="body"> <ul class="list"> <li> <span> <label>condition</label> ...

htmlcss

The presented data in the HTML table is displayed in a reverse horizontal order

I am in the process of developing a calculator and have chosen to use Bootstrap4 tables for the button alignment. However, I am facing an issue where the table is being rendered in the reverse order of the code that I have written. The columns within the t ...

htmlcsshtml-tablebootstrap-4bootstrap-table

The Bootstrap Row emerges from the shadow of the margin

Recently, I started diving into the world of Bootstrap. While playing around with some code to create rows resembling a table, I noticed an issue. When I loaded the code in my browser, the margins of the rows appeared off-screen. Take a look at this simple ...

javascripthtmlcsstwitter-bootstrap

Deleting database information using Jquery when a div is clicked

I'm looking to create an alert system where users will see a pop-up alert on their screen. However, I am facing a major issue in removing the div completely. I understand that I need to remove it from the database, but I'm struggling with finding ...

javascriptphpjqueryhtmlcss

Eliminate the hazy white layer covering the exterior of an image that has been blurred using CSS

Hey there, I've encountered an issue with an image that transitions from blurred to unblurred when the dom is loaded. <div class="image-wrapper-container2"><div class="image-wrapper orig" style="background-image: url('https://www.w3scho ...

javascriptjqueryhtmlcssimage

Elements in list appear to break apart when resizing

I had previously posted about this issue, but I deleted it after making some progress. I am currently facing a problem with my todo list project when resizing the screen. My project involves using JavaScript to create a new list item for each entry. Users ...

javascripthtmlcssbootstrap-4html-lists

"Spinning Effect in CSS with a Pulsating Twist

I am attempting to create a unique CSS animation that involves rotating an image and giving it a pulsing effect similar to the animation seen on Shazam's button. Here is the code that I have so far. While the image is successfully rotating, I am runn ...

htmlcssanimationrotationfrontend

Python encountered an error while attempting to fetch image URLs

Whenever I run the following Python script, I encounter the error AttributeError: 'NoneType' object has no attribute 'findAll'. After conducting some research, it seems that the issue may be related to passing a 'None' value w ...

pythonseleniumfirefox

What is the reason behind the issue where max-height disrupts border-radius?

My inline svg is styled with the following CSS: .img { border-radius: 15px; overflow: hidden; max-width: 70vw; margin-top: 6vh; max-height: 50vh; z-index: -1; text-align: center; } Everything seems to work as expected, except f ...

htmlcss

Having trouble getting jQuery JavaScript to work on Wordpress and feeling lost about how to implement no-conflict mode syntax

Trying to implement the code from this Codepen http://codepen.io/eternalminerals/pen/qdGvMo on my WordPress website at I understand that since WordPress is in no-conflict mode, I need to change $ to jQuery. I have made this adjustment and ensured that the ...

javascriptjqueryhtmlcsswordpress

Reading an XML file using Java and printing out any errors encountered

Currently, I am facing the challenge of parsing an XML file using Java. Despite conducting extensive research and experimenting with various libraries like DOM and SAX, each of which offers a multitude of options, I have encountered a setback. My main goal ...

javaxmlparsingerror-handlingxml-parsing

the optimal approach to determine character spacing in SCSS

I am currently working on an input field that is styled using CSS for digit entry. However, I am facing issues with the variations in character or digit width, causing them to misplace upon rendering. My project involves VUE and Laravel development, and I ...

htmlcssvue.jssass

Tips for altering CSS using the `:hover` pseudo-class

CSS Style for Navbar .navbar li { color: #B7B7B7; font-family: 'Montserrat', sans-serif; font-size: 14px; min-width: 70px; padding: 22px 16px 18px; } .navbar #menumain ul { width: 120%; } .navbar ul ul { display: none; } <div ...

htmlcssdisplaymousehover

Interactive carousel featuring responsive image zoom effect on hover

Utilizing the flickity carousel, I have crafted an example which can be found at this link to codepen.io. Here is the CSS code that has been implemented: CSS .image-hoover { overflow: hidden; } .image-hoover img { -moz-transform: scale(1.02); -web ...

javascriptjquerycsscss-transitionscarousel

What causes the failure of C# XmlDocument.LoadXml(string) when an XML header is present in the input?

Can someone help troubleshoot why the code snippet below is triggering an XmlException with the error message "Data at the root level is invalid. Line 1, position 1?" var content = "<?xml version="1.0" encoding="utf-16"?><Report> ......" Xml ...

c#.netxml

Chrome displaying elements out of alignment

Anyone have any insights into why my webpage elements are displaying differently in Chrome compared to IE? It's driving me crazy! Here's a screenshot of how it looks in Chrome: https://i.sstatic.net/xAlEi.jpg And here's how it appears in IE ...

css

"Optimize Magellan Sidebar for Mobile Devices by Relocating it to the Bottom of the Page

After spending a week working with Foundation 5 framework, I'm curious if there is a straightforward way to make my magellan sidebar shift to the bottom of the page when viewed on mobile or tablets. <div data-magellan-expedition="fixed"> <di ...

javascriptjqueryhtmlcsszurb-foundation

Discovering the CSS code for customization

As a beginner, I apologize in advance for any silly questions ˆˆ I am currently working on a website using bootstrap. Everything is functioning correctly, but I am struggling to override some CSS styles. In the image provided, you can see how I used the ...

htmlcssbootstrap-4