...

View Full Version : How to hide <p> with css



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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum