How to Select Every Other Div Class Element Using Just CSS (No Js)

How do I select every other div class element using just CSS (no js)

You want nth-child() on .item.

.item:nth-child(odd) .description {
    background-color: red;
}

Demo:

Select every other element of class using css3

This cannot be done with plain CSS (in any way that I yet know of), however a plain-JavaScript solution is pretty simple:

var​ lis = document.querySelectorAll('li.product');

for (var i=0,len=lis.length;i<len;i++){
    if (i%2 == 0){
        lis[i].className = 'oddProduct';
    }
}​

JS Fiddle demo.

jQuery could be used instead (as could, presumably, any other JavaScript library), but it's certainly not required.

CSS Selector, apply CSS every 2 divs

Maybe you didn't apply it correctly try this Fiddle

.card:nth-child(odd){
color:green;
}

.card:nth-child(odd){    color:green;}

<div class="card">  <div class="test">Asdasdasd</div></div><div class="card">  <div class="test">Asdasdasd</div></div><div class="card">  <div class="test">Asdasdasd</div></div><div class="card">  <div class="test">Asdasdasd</div></div>

Can I write a CSS selector selecting elements NOT having a certain class or attribute?

Typically you add a class selector to the :not() pseudo-class like so:

:not(.printable) {
    /* Styles */
}

:not([attribute]) {
    /* Styles */
}

But if you need better browser support (IE8 and older don't support :not()), you're probably better off creating style rules for elements that do have the "printable" class. If even that isn't feasible despite what you say about your actual markup, you may have to work your markup around that limitation.

Keep in mind that, depending on the properties you're setting in this rule, some of them may either be inherited by descendants that are .printable, or otherwise affect them one way or another. For example, although display is not inherited, setting display: none on a :not(.printable) will prevent it and all of its descendants from displaying, since it removes the element and its subtree from layout completely. You can often get around this by using visibility: hidden instead which will allow visible descendants to show, but the hidden elements will still affect layout as they originally did. In short, just be careful.

Select all elements before element with class?

a {  text-decoration: none;  border-left: 1px solid black;}
a.active, a.active ~ * {  border: none;}

<div>    <a href>One</a>    <a href>Two</a>    <a href>Three</a>    <a href class="active">Four</a>    <a href>Five</a></div>

Selecting Every Second Level In CSS

While there is no problem when the number of levels is known, when it is not known then it becomes impossible with CSS only, not even if you are able to anchor the topmost div to some other element with a selector.

Select the only Element with no class or ID

You can use the :not:

CSS:

div:not([class]):not([id]) {
    height: 200px;
    width: 200px;
    background-color: red;
}

HTML:

<div></div>
<div class="shikaka"></div>
<div id="shikaka2"></div>    

http://jsfiddle.net/qcq0qedj/

How can I select every other element that does not have a specific class?

Instead of removing the element as Justin suggested, you could replace it with an element of a different tag. We could use details, for example:

var placemarker = document.createElement("details");
node.parentNode.replaceChild(placemarker, node);
placemarker.appendChild(node);

Then, instead of using :nth-child, use :nth-of-type.

details { display:none; }
div.zebra:nth-of-type(2n) { /* colors */ }

Unhiding the element can then be done with:

placemarker.parentNode.replaceChild(placemarker.firstChild);

See this static example.

---

Related Topics