Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Target the First Visible Element After the First Active Element in CSS

Target the First Visible Element After the First Active Element in CSS

Problem

Getting into some pretty gnarly CSS here. In the below scenario, I want to only match #4. This is what I have going on:

  • 2
  • 4
  • 7
  • 9

Here are my attempts, which are failing:

/* Only matches the next immediate li (so it works if #3 is not hidden) */
.tabMenu li:not(.hidden).active + li:not(.hidden) a {
  color: red;
}

/* Matches #4 and #7, I just want #4 */
.tabMenu li:not(.hidden).active ~ li:not(.hidden) a {
  color: red;
}

After 30 minutes on this I have decided to bring my problem to you. Please help!

Problem courtesy of: Kirk Ouimet

Solution

Taking advantage of the way CSS sibling selectors work will be the way to go here.

  • Step 1: Let us perform a selection of all the Elements after the first active one which does not contain the class hidden or active.

    li.active ~ li:not(.hidden):not(.active) {
        color:red;
    }
    
  • Step 2: Let us remove the target of all the siblings after the targeted elements. The CSS selector ~ selects all sibling elements which come after it, and NOT including it. Thus by applying it to the li elements after the target, we successfully remove from all the elements except the first one which was targeted in step 1.

    li.active ~ li:not(.hidden):not(.active) ~ li {
        color:inherit;
    }
    

See this happening at: http://jsfiddle.net/nJHd2/

Solution courtesy of: Raj Nathani

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Target the First Visible Element After the First Active Element in CSS

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×