SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Duplicate selectors on stylesheet

    If on a site, I'm using the standard p, and whatever else selectors, how can I initiate two instances of one selector?

    For example, on a site I have links. Now the font size is fairly small, as it's for content, but I want another duplicate class of those link selectors (active, hover, etc) for the navigation.

    How can I do this?

  2. #2
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    How are your links definded?
    If they are like
    Code CSS:
    .content a { ... }
    .content a:hover {... }
    Just add your nav like this:
    Code CSS:
    .content a, .nav a { ... }
    .content a:hover, .nav a:hover { ... }
    Now if you use a link in your nav div they will be the same as in content.
    Ryan B | My Blog | Twitter

  3. #3
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sadly you picked two examples that are handled completely differently. The paragraphs example you picked is solved in the more common and powerful way.

    If you define a selector a second time, it keeps everything you had before, but anything new is added and anything in conflict it takes the newest declaration (the one farthest down the page, that's where "cascading" comes from in CSS). So...

    Code:
    p {
    color:#FF0000;
    margin:1em;
    }
    
    p {
    background-color:#000000
    margin:0;
    }
    You will get the color from the first declaration, and background-color from the second. Those two aren't in conflict, no problem. But the margin is defined in both and so the 2nd one wins, you get a margin of zero. And that will affect ALL paragraphs.

    If there are paragraphs you want to affect in different ways, that's where classes and ids come in. Pick a default style that you will use most and declare that style for your selector. All the other styles you want to apply will require a class or id. You can read about them at W3Schools.

    http://www.w3schools.com/css/css_syntax.asp

    Anchors can be defined in the same way, however, your example is about the different anchor states, and that requires using pseudo classes. Pretty similar, but it throws an extra kink into the plan especially if you're using links with classes or ids.

    http://www.w3schools.com/css/css_pseudo_classes.asp

    Hopefully that will give you a good place to start.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.


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
  •