Choose the singular Element lacking both a class or an ID

Question

Choose the singular Element lacking both a class or an ID

I came across this and that question, however, they are both focused on Javascript.

I am searching for a way to target the lone div that does not have an ID or Class assigned to it.

For instance:

<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 always be only one div without a class and id.
This div might change position within the HTML structure or may not be there at all.
I am not allowed to use Javascript. However, any language that can be compiled into CSS like SASS is acceptable.
The targeted divs will always be directly under <body>.
The specific classes or IDs of other elements are unknown in advance.

html css css-selectors

Answer 1

Answer №1

To achieve this effect, you can utilize the CSS :not selector:

Here is an example of how to implement it in your CSS code:

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

And here is how you can use it in your HTML code:

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

If you'd like to see a live demo, check out this link: http://jsfiddle.net/qcq0qedj/

Answer 2

To achieve this effect, you can utilize the CSS :not selector:

Here is an example of how to implement it in your CSS code:

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

And here is how you can use it in your HTML code:

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

If you'd like to see a live demo, check out this link: http://jsfiddle.net/qcq0qedj/

Answer 3

Answer №2

Here is an example of what you can do:

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

Check out this JSFiddle link for more details.

Answer 4

Here is an example of what you can do:

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

Check out this JSFiddle link for more details.

Answer 5

Answer №3

Ah, the wonders of using :not. (Also known as 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/

Answer 6

Ah, the wonders of using :not. (Also known as 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/

Choose the singular Element lacking both a class or an ID

Answer №1

Answer №2

Answer №3

Similar questions

What is the process for including id parameters within the URL of an HTML page?

Tips for shrinking the circumference of a circle

Tips for restricting text within a div container

Adding a new .row in Angular based on an ngFor condition

Exploring the width of Bootstrap 5 Tab Pane content

Pressing an HTML button can enable and disable the pause and resume functions

How can AJAX be used to execute a PHP script that deletes a record from a database table?

Unable to eliminate blue highlighting in Chrome when an element is in focus

Tips for populating an HTML input with the value of a link element using JQuery

Content missing after centered banner

Resizing and uploading multiple images with accompanying descriptions

Avoiding the separation of hyphenated words when they overflow on a new line

Why do I keep getting an ExpressionChangedAfterItHasBeenChecked error after trying to update a random color in an

Shift heading 1 as well as heading 2 to the image's right side

Problem with resizing in CSS and jQuery

Is it possible to automatically refresh a webpage with the same URL when accessed on the same server?

Achieve Perfect Alignment of Text Inside a Floating Div

Troubleshooting issue with ellipsis functionality in Bootstrap using flex layout

The input field does not accept any values even after setting it to be editable

What is the best method for eliminating HTML line breaks <br />?