CODEWITHSUNDEEP
htmlcss
Hamed Kamrava
Hamed Kamrava

Reputation: 12847

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

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?

Upvotes: 4

Views: 39624

Answers (5)

Danny Beckett
Danny Beckett

Reputation: 20850

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>

Upvotes: 13

Mihai Stancu
Mihai Stancu

Reputation: 16107

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.

Upvotes: 4

Prasanth K C
Prasanth K C

Reputation: 7332

CSS pseudo clsses may help you. More info on nth child pseudo class can be obtained from Click Here

button:nth-child(3) {

  // Your CSS Here
}

Upvotes: 2

iConnor
iConnor

Reputation: 20189

i don't think there is a cross browser way to do this in css without class or id so For Cross Browser Compatability 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>

with this CSS

.no-style{
    display:inline;
}

.container > button {
    background:skyblue;
}

Fiddle

But if your not worried about browser compatability you can use 

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

Fiddle

Upvotes: 3

Stefan
Stefan

Reputation: 3900

If you cannot change the HTML or the 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>

Upvotes: 2

Related Questions