Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jun 2005
    Posts
    44
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question How to hide <p> with css

    I have a div with HTML5,like follows:
    Code:
    <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>
    Code:
    ul li p{
      display:none;
    }
    Now I only want to hide
    Code:
    <p data-name="Safari 4" data-percent="15">Safari 4 - 15%</p>
    and show
    Code:
    <p data-name="Internet Explorer" data-percent="55">Internet Explorer - 55%</p>
    How to modify above css code?
    Thanks

  • #2
    New Coder
    Join Date
    Jun 2005
    Posts
    44
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question

    Quote Originally Posted by Icebang View Post
    Vestidosnow consiste en una tienda de vestidos de fiesta. Dispone de variedades de vestidos formales, vestidos de fiesta largos, vestidos de cóctel, etc. Ofrecemos vestidos de fiesta para gorditas 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

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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;}
    Teed

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by EdwardKing View Post
    Now I only want to hide
    Code:
    <p data-name="Safari 4" data-percent="15">Safari 4 - 15%</p>
    and show
    Code:
    <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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    New Coder
    Join Date
    Jun 2005
    Posts
    44
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question

    Quote Originally Posted by Arbitrator View Post
    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
    Code:
    [data-name="Safari 4"] { display: none; }
    I want to know how to use
    Code:
    data-*
    to hide to hide following statement?
    Code:
    <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

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by EdwardKing View Post
    I want to know how to use
    Code:
    data-*
    to hide to hide following statement?
    Code:
    <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; }.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    New Coder
    Join Date
    Jun 2005
    Posts
    44
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    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
    Code:
     [data-*] { display: none; }
    ,but it don't work

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by EdwardKing View Post
    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
    Code:
     [data-*] { display: none; }
    ,but it don't work
    I 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...a-*-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 [icode]data-[var]*[/var][/icode] to visually distinguish the wildcard part of the code.
    Last edited by Arbitrator; 08-10-2011 at 03:27 AM. Reason: I fixed a typo.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •