How to remove all CSS styles for an element without a class or identifier?

Question

I have 5 buttons without any class or id. Here is 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 CSS styles?

Answer 1

As an alternative to Mihai's answer, if you want to use it more than an element, add a class to any suitable button :

 <button class="nostyle"> 

Then in your CSS just change the button to button:not(.nostyle) .

What is this! ... what, did you expect 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

Violation of the wording of the OP:

We want to remove the style (i.e. the style has already been applied to the element, and we want to delete it) without any classes or identifier (for example: HTML does not need to be touched).

First of all, how do we "reset" some CSS properties that have already been inherited by an element?

This requires some knowledge of the default values:

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

But also some research regarding the rest of your css, because a reset stylesheet may be included in your project, in which all elements everywhere behave differently (this usually applies to paddings / margin / border, etc.).

Now that we know how to “reset” 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 children that occupy the nth offset inside the parent, regardless of the type of element.

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 the latest Try Connors fiddle for maximum efficiency and elegance, or for the first compatibility.

Answer 3

I don't think there is a cross-browser way to do this in css without class or id , so for compatibility with Cross Browser you can do something like this

 <div class="container"> <button>text 1</button> <button>text 2</button> <div class="no-style"> <button>text 3</button> </div> <button>text 4</button> <button>text 5</button> </div> 

using this CSS

 .no-style{ display:inline; } .container > button { background:skyblue; } 

Fiddle

But if you are not worried about browser compatibility, you can use

 button:not(:nth-child(3)){ background:skyblue; } 

Fiddle

Answer 4

If you cannot change the HTML or CSS stylesheet, you can try this jQuery (untested):

 <script type='text/javascript' src='http://code.jquery.com/jquery.min.js'></script> <script type='text/javascript'> var buttons = $('button'); var styles = {'width': 'auto', 'height': 'auto', 'background': 'none', 'box-shadow': ''}; buttons[2].css(styles); </script> 

Answer 5

CSS pseudo clips can help you. More information on the nth child pseudo-class can be obtained from Click here.

 button:nth-child(3) { // Your CSS Here }