Select the only Element with no class or ID

Question

I've seen both this and this question, but they're both Javascript-oriented.

I'm looking to select the only div which has no ID or Class.

Example:

<body>
<div class="X" ... />
<div class="Z" ... />
...
<div class="Y" ... />
<div>Select me</div>
<div id="footnote" ... /> <!-- Notice I have no class. -->
...
</body>

There will only ever be one div with no class and id.
The div may change places, or be not present.
No Javascript. However any language which can compile to CSS like SASS is fine.
The divs in question will only ever be directly under <body>.
I may not always know what classes or IDs there will be.

possible duplicate of [Can I write a CSS selector selecting elements NOT having a certain class?](http://stackoverflow.com/questions/9110300/can-i-write-a-css-selector-selecting-elements-not-having-a-certain-class) — mplungjan, Jun 15 '15 at 20:24
@JayMoy The problem here is that there may be multiple divs with no class, but they still have an ID. — Robobenklein, Jun 15 '15 at 20:28
You can stack the `:not` like in the answer below.. Depends if you know all the classes and id's I guess — Jay, Jun 15 '15 at 20:33
@JayMoy Sadly, I do not know all the possible classes and IDs, but it appears I already got an answer in record time. Thanks! — Robobenklein, Jun 15 '15 at 20:34
More on div tags and self-closing syntax: http://stackoverflow.com/questions/5455768/why-do-browsers-think-this-div-tag-isnt-immediately-ended — BoltClock, Jun 16 '15 at 04:11

score 16 · Accepted Answer · answered Jun 15 '15 at 20:28

16

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/

answered Jun 15 '15 at 20:28

taxicala

21,408
7
37
66

score 3 · Answer 2 · answered Jun 15 '15 at 20:27

3

You can do:

body > div:not([class]):not([id]) { }

JSFiddle

answered Jun 15 '15 at 20:27

Multitallented

51
2

score 1 · Answer 3 · answered Jun 15 '15 at 21:25

Ah... the beauty of :not. (AKA - not:ugly)

div:not([class]):not([id]) {
    color: #fff;
    padding: 2px 4px;
    background: red;
}

<body>
    <div class="X">...</div>
    <div>Select me</div>
    <div class="Z">...</div>
    <div class="Y">...</div>
    <div>Select me, too!</div>
    <div id="footnote">...</div>
</body>

http://jsfiddle.net/stevenventimiglia/53Lqekod/

Select the only Element with no class or ID

3 Answers3