how to combine the css selector using “:not”


Tags: css

Problem :

how can i summarize the following css code? The current css code will display all li element as none.

ul.cmpro-accordion > li:not(.cid-2),
ul.cmpro-accordion > li:not(.cid-61){
    display: none;
}


Solution :

It's about specificity.

<ul class="cmpro-accordion">
    <li>li text 1</li>
    <li class="cid-2">li text 2</li>
    <li class="cid-61">li text 3</li>
    <li>li text 4</li>
    <li>li text 5</li>
</ul>

Css:

ul.cmpro-accordion > li.cid-2,
ul.cmpro-accordion > li.cid-61 {
    display: block
}
ul > li:not(.cid-2),
ul > li:not(.cid-61) {
    display: none;
}

Example


    CSS Howto..

    How should I set a custom style on a object that is a gwt component?

    How to have full page that is not a background img or fixed positioned?

    CSS box-shadow shows weird white region?

    How to prevent page margin from expanding in HTML/CSS code when window is resized

    How to select a group of elements after every nth-element in CSS?

    How to group elements based on same specific css attribute using java script or jQuery?

    How to Triger a css animation for a y element from a a trigger x

    How to clone an element using class name and append it to the body

    How to create a css class for category tags?

    How to get :before selector behind its box?

    Show on hover using CSS and HTML only

    Javascript - how to show and hide an element per second?

    jquery: how to change properties of whole css-class? [duplicate]

    How to hide a soft hyphen (­) in HTML / CSS

    Learning CSS, how to use stylesheet with master page

    CSS: How to create a button with an arrow placedo on the right

    hover div to show another div

    Including loads of css files and Javascript file - how do I optimize

    How to set full auto width for input tag

    How to make links work, regardless of location in directory structure?

    How to keep the top div height fixed and bottom div height in %age

    How to hide div for specific height or width using CSS [duplicate]

    How do i place 4 headers from 1 div next to each other?

    How to refer to children elements in CSS

    How to use Font Awesome for checkboxes etc

    how to center text vertically in html using css only

    How do you prevent a CSS animation from rerunning when the display property changes?

    How to style multiple instances differently of the same jquery control?

    CSS3: How do I make a linear gradient on top of an image suitable for cross browser compatibility?

    How to add CSS stylesheet to aspx.vb table