SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    ********* Ornithologist AtomicPenguin's Avatar
    Join Date
    May 2002
    Location
    Vancouver, BC
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    applying style to CLASS

    How would you make a blanket style change for all elements of a class? (say, make them invisible)

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure if this is what you mean as it seems too obvious! But if you have a class called .test and you want to make all its elements invisible you could just add display none.

    Code:
    <style type="text/css" media="screen">
    <!--
    .test {
    	color: #333333;
    	background-color: #0000FF;
    	height: auto;
    	width: auto;
    }
    .test{
    	display: none;
    }
    
    -->
    </style>
    
    <div class="test">
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <img src="pic4.jpg" />
    </div>
    The text and images would disappear. I don't think this is what you meant though!!

    Paul

  3. #3
    ********* Ornithologist AtomicPenguin's Avatar
    Join Date
    May 2002
    Location
    Vancouver, BC
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not exactly, but thanks for the response.

    What I've got is a bunch of elements scattered over the page, all with the same style (defined in a stylesheet). What I want is to be able to refer to all those elements' style on the fly, all in one go,

    so, when you click THIS:

    <a href="#">Change Styles!</a>

    it would change the style of all elements within that particular class. Any clearer? Thx! :-)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I see.

    I think the answer will be some form of javascript.

    You could just use a styleheet switcher script and have a different stylesheet for each different effect you want. There are plenty of scripts about that will do that and are quite easy to implement.

    Alternatively this link might be of use:
    http://developer.apple.com/internet/...pt/styles.html

    I think it will allow you to change style elements independently.

    Hope this is of some use.

    Paul

  5. #5
    ********* Ornithologist AtomicPenguin's Avatar
    Join Date
    May 2002
    Location
    Vancouver, BC
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help, Paul.

    You're quite right - javascript would be the answer. Maybe I'll post in that forum... ;-)

  6. #6
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi there,

    If you put it on the <a>-tag, you could try this:

    Code:
    <a href="#" class="hidden"> not seen before hover</a>
    and the CSS for it:

    Code:
    a.hidden {
    display:none;
    }
    
    a.hidden:hover {
    display:inline; */or display:block */
    }
    You could see this on the demo menu:hover @ meyerweb: http://www.meyerweb.com/eric/css/edge/popups/demo.html


    .. OR, if you need more power, check out the style switcher at http://www.alistapart.com/stories/alternate/


    good luck!
    Last edited by wisbin; Feb 3, 2003 at 11:07.
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..



Bookmarks

Posting Permissions

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