How do I remove all CSS styles for an element without a Class or ID?

Question

I have 5 buttons without any Class or ID. Here's my code:

HTML

<button>Btn1</button>
<button>Btn2</button>
<button>Btn3</button> <!-- I don't want this elem to get the CSS styles -->
<button>Btn4</button>
<button>Btn5</button>

CSS

button {
    width: 100px;
    height: 45px;
    background-color: #12aeef;
    border: none;
    box-shadow: 0px 5px 3px #888888;
}

Demo on jsFiddle.

How can I make the 3rd element not get the CSS styles?

Answer 1

As an alternative to Mihai's answer, if you'd like to be able to use it on more than element, add a class to any appropriate button:

<button class="nostyle">

Then in your CSS, simply change button to button:not(.nostyle).

That's it! ...what, you were expecting more work?

Here's the updated code:

button:not(.nostyle) {
    width: 100px;
    height: 45px;
    background-color: #12aeef;
    border: none;
    box-shadow: 0px 5px 3px #888888;
}

<button>Btn1</button>
<button>Btn2</button>
<button class="nostyle">Btn3</button>
<button>Btn4</button>
<button>Btn5</button>

Answer 2

Abusing OP' wording:

We want to remove styling (i.e.: the styling was already applied to the element and we want it removed) without any Classes or ID (i.e.: HTML must not be touched).

First and foremost how do we "reset" some CSS properties that have already been inherited by an element?

This requires some knowledge of the defaults ex.:

width: auto; // the default for sizes is auto

But also some investigation regarding the rest of your css because you may have some reset stylesheet included into your project which tells all elements everywhere to have behave diferently (this usually applies to paddings / margins / borders etc.).

Now that we know how to "reset" the CSS properties we need to identify the element to which we apply this "reset".

We can use :nth-child(), a CSS3 pseudo selector that finds child elements which ocupy the nth offset within the parent regardless of element type.

Put it together and we have:

button:nth-child(3) {
    width: auto;
    height: auto;
    background: none;
    /* ... */
}

Ignoring OP' wording but offering a better solution:

Try Connors last fiddle for the most efficience and elegance, or his first for full compatibility.