SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    style only if it has 2 classes

    I don't know if this is possible but is there a way with only css to trigger an element only when 2 classes are set to it, for example if I have

    HTML Code:
    .someanchor {
    color: #FFF;
    }
    .someanchor {
    color: #000;
    }
    <a class="someanchor"></a>
    <a class="someanchor lastanchor"></a>
    I want to be able to have the anchor with someanchor class applied to it, to display in white text but black, when it has the 2 classes, I don't have the option to remove the first class
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,882
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by tlacaelelrl View Post
    I don't know if this is possible but is there a way with only css to trigger an element only when 2 classes are set to it, for example if I have

    HTML Code:
    .someanchor {
    color: #FFF;
    }
    .someanchor {
    color: #000;
    }
    <a class="someanchor"></a>
    <a class="someanchor lastanchor"></a>
    I want to be able to have the anchor with someanchor class applied to it, to display in white text but black, when it has the 2 classes, I don't have the option to remove the first class
    If you mean, can I style an element that has any two classes attached then the answer is 'no', but I suspect that isn't what you meant.

    You can style an element that has two specified classes attached by
    Code CSS:
    a.someanchor.lastanchor {color:#000;}

    But there may be other ways that give you a slightly better code base (I'm not saying that these definitely are better, just that I would consider them as possible alternatives), for example:

    • a.lastanchor {color:#000 !important;} will override any conflicting declarations
    • using an ID rather than a class, if there's only going to be one on the page, will take precedence over class styling
    • use the cascading part of CSS this is bad code:
      Code:
      <div>
      <a class="someanchor">...</a>
      <a class="someanchor">...</a>
      <a class="someanchor lastanchor">...</a></div>
      
      .someanchor {...}
      .someanchor.lastanchor {...}
      but this is good code:
      Code:
      <div class="somesection">
      <a>...</a>
      <a>...</a>
      <a class="lastanchor">...</a></div>
      
      .somesection a {...}
      .somesection .lastanchor {...}
      Now I appreciate that you might not be able to change the code structure to that extent, but if you can then it's worth looking into.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Your code example is a bit confusing.

    .someanchor {
    color: #FFF;
    }
    .someanchor {
    color: #000;
    }
    if you are doing this the the second declaration overrides the first. So text in all elements with the class someanchor will be #000. As mentioned above you could chain the styles, being careful with specificity.

    Code:
    .style2.style1 {
    color: pink;
    float:left;
    }
    .style1 {color: #FFF;
    font-size:200%;
    background:red;
    }
    .style2 {
    color: #000;
    background:cyan;
    }
    In the above, the text will be pink and the element floated left ONLY if the element itself has both classes (class='style1 style2'). Note also that the bg for the element will end up beign cyan; since .style1 and .style2 both try to set the bg color AND HAVE THE SAME SPECIFICITY, the later one in the code is applied. in the case of .style2.style1 color rule is applied because the rule has two classes thus greater specificity than a rule with just one class.

    Also note you could achieve the same with wraps and et greater control over the cascade
    Code:
    <p class="style1"><a href="#" class="style1">link</a><a href="#" class="style2">link</a></p>
    <p class="style2"><a href="#" class="style2">link</a><a href="#" class="style2">link</a></p>
    .style2. style1 {
    color: pink;
    float:left;
    }.
    style1. style2 {
    color: blue;
    float:right;
    }
    .style2. style2 {
    color: purple;
    display:block
    }
    .style1. style1 {
    color: green;
    display:block
    }
    .style1 {color: #FFF;
    font-size:200%;
    background:red;
    }
    .style2 {
    color: #000;
    background:cyan;
    }

    its important to note that specificity applies by COUNT despite names.
    so: .strageClass .style2{} has the same "importance" as .style1 .style2{}, and rules ror the one that is later in the CSS code will override rules for the previous.
    hope that helps

  4. #4
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Your code example is a bit confusing.
    if you are doing this the the second declaration overrides the first. So text in all elements with the class someanchor will be #000. As mentioned above you could chain the styles, being careful with specificity.
    I misspelled the CSS rules one was someanchor the other one lastanchor, I only need to trigger the background and color basically the setup generates a menu just like this

    HTML Code:
    <ul>
    <li id="32" class="menu-item">
    <a>abd</a>|
    </li>
    <li id="45" class="menu-item">
    <a>abd</a>|
    </li>
    <li id="65" class="selected menu-item">
    <a>abd</a>|
    </li>
    </ul>
    so I have access to the id which will not change for a long time, and the classes selected and menu-item selected is page where I am on, they all have black background white text and when selected white background black text, that one I have setup however the last | when not selected is black and I want to change it so when it is selected it turns white, the rest of | are always white
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Remember what is aid about specificity!!

    This is the stupid thing about WP. If they had let you put a class on the UL (.menu) you could have had this:

    .menu li { styles}
    .menu .selected { other styles}

    still, you can handle it this way ( since we know that everything is an LI in what we are trying to target)

    .menu-item { styles;}
    li.selected {styles;}

    if you have MANY menus throughout your page... you can use an additional class or ID:

    #main .menu-item { styles;}
    #main li.selected {styles;}
    #side .menu-item { styles;}
    #side li.selected {styles;} #main .menu-item { styles;}
    .alt .menu-item { styles;}
    .alt li.selected {styles;} #main .menu-item { styles;}

    as long as you keep an eye on specificity.. you should be fie with the above pattern

  6. #6
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Remember what is aid about specificity!!

    This is the stupid thing about WP. If they had let you put a class on the UL (.menu) you could have had this:
    I wonder how you figured it was a wordpress issue, I usually work with Joomla and have come across problems but usually they are because I am trying to do something very special but I find that this kind of thing should be core in wordpress like being able to remove the separator from the last item or at least have a class added to it so we can easily add a CSS rule in the stylesheet, I started working with wordpress and have come across plenty of situations where you might think it should be part of the core functionality to then find out it is not "what?" anyway, thank you for all your help!!!
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I wonder how you figured it was a wordpress issue,
    lol. I took a gamble. I use Joomla! and WP on occasion. My biggest pet peeve about these CMSs is that their code assumes usage and adds classes to everything... THEN there is the true tell-tale sign. Your template probably uses one the WP_LIST tags.. which generate the LI items, and adds all sort of class names, which are actually necessary if you use deliberate CSS coding techniques.

    And you are welcome.


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
  •