EdwardKing
08-08-2011, 06:25 AM
I have a div with HTML5,like follows:
<div id="graph_data">
<h1>Browser share for this site</h1>
<ul>
<li>
<p data-name="Safari 4" data-percent="15">Safari 4 - 15%</p>
</li>
<li>
<p data-name="Internet Explorer" data-percent="55">Internet Explorer - 55%</p>
</li>
</ul>
</div>
I know use following css code to hide <p>
ul li p{
display:none;
}
Now I only want to hide
<p data-name="Safari 4" data-percent="15">Safari 4 - 15%</p>
and show
<p data-name="Internet Explorer" data-percent="55">Internet Explorer - 55%</p>
How to modify above css code?
Thanks
EdwardKing
08-08-2011, 08:28 AM
Vestidosnow consiste en una tienda de vestidos de fiesta (http://www.vestidosnow.com"). Dispone de variedades de vestidos formales, vestidos de fiesta largos (http://www.vestidosnow.com/vestidos-de-fiestas-largos-c-3.html"), vestidos de cóctel, etc. Ofrecemos vestidos de fiesta para gorditas (http://www.vestidosnow.com/vestidos-de-fiestas-largos-c-3.html") pero de alta calidad. Además tenemos varios colores y tamaños por elegir. Date prisa a comprar uno.
I can't understand with non-English language
teedoff
08-08-2011, 02:20 PM
You need to target a specific <p> tag correct? Then give the <p> tag a class or id and target THAT class/id.
<p id="someID" data-name="Safari 4" data-percent="15">Safari 4 - 15%</p>
#someID {display: none;}
Arbitrator
08-08-2011, 02:54 PM
Now I only want to hide
<p data-name="Safari 4" data-percent="15">Safari 4 - 15%</p>
and show
<p data-name="Internet Explorer" data-percent="55">Internet Explorer - 55%</p>
How to modify above css code?Use an attribute selector: [data-name="Safari 4"] { display: none; }
Note that this will not hide the list item element. To hide that, you'll have to add another attribute (e.g., data-*, id, or class) to the relevant li element. You may want to consider moving your existing data-* attributes to the li element.
EdwardKing
08-10-2011, 02:00 AM
Use an attribute selector: [data-name="Safari 4"] { display: none; }
Note that this will not hide the list item element. To hide that, you'll have to add another attribute (e.g., data-*, id, or class) to the relevant li element. You may want to consider moving your existing data-* attributes to the li element.
The following statement can run well
[data-name="Safari 4"] { display: none; }
I want to know how to use data-* to hide to hide following statement?
<p data-name="Safari 4" data-percent="15">Safari 4 - 15%</p>
<p data-name="Internet Explorer" data-percent="55">Internet Explorer - 55%</p>
Thanks
Arbitrator
08-10-2011, 02:19 AM
I want to know how to use data-* to hide to hide following statement?
<p data-name="Safari 4" data-percent="15">Safari 4 - 15%</p>
<p data-name="Internet Explorer" data-percent="55">Internet Explorer - 55%</p>Frankly, I don't understand this request.
Please be more specific and use correct English.
If you're asking how to hide both elements, you can use [data-name="Safari 4"], [data-name="Internet Explorer"] { display: none; }.
EdwardKing
08-10-2011, 02:45 AM
Frankly, I don't understand this request.
Please be more specific and use correct English.
If you're asking how to hide both elements, you can use [data-name="Safari 4"], [data-name="Internet Explorer"] { display: none; }.
I know I can use [data-name="Safari 4"], [data-name="Internet Explorer"] { display: none; }
You say
>To hide that, you'll have to add another attribute (e.g., data-*, id, or class) to the relevant li element.
So I try [data-*] { display: none; },but it don't work
Arbitrator
08-10-2011, 03:23 AM
You say
>To hide that, you'll have to add another attribute (e.g., data-*, id, or class) to the relevant li element.
So I try [data-*] { display: none; },but it don't workI see. I didn't mean that you should literally use "data-*". I was using the asterisk character as a wildcard character because there are no fixed names for data-* attributes; the last part of the attribute name is conceived by the document author.
The HTML5 draft specification uses the same terminology: http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#embedding-custom-non-visible-data-with-the-data-*-attributes.
I suppose it would also help if the vBulletin forum system supported something equivalent to the HTML element for stand-in content (i.e., var). Then I could use something like data-* to visually distinguish the wildcard part of the code.