Why can't I change the width of html buttons on class level in css?

Question

I want three buttons to each take up 33% of the assigned space. They are grouped in a class "numbers".

When I define the width for the button tags, that works fine, but when I do it for all buttons in the class that they belong to, nothing happens.

html:

<html>
<link rel="stylesheet" href="opmaak.css">
<body>
    <section class="numbers">
        <button type="button" value=1> 1</button>
        <button type="button" value=2> 2</button>
        <button type="button" value=3> 3</button><br>
    </section>
</body>
</html>

css when I do it on button level:

button {
    width: 33%;
}

css when I try it for all buttons of that class:

button.numbers {
    width:33%;
}

Could anyone point out why that is?

button.numbers {
    width: 33%;
}

<html>
<link rel="stylesheet" href="opmaak.css">
<body>
    <section class="numbers">
        <button type="button" value=1> 1</button>
        <button type="button" value=2> 2</button>
        <button type="button" value=3> 3</button><br>
    </section>
</body>
</html>

`.numbers button {...}`, also it would be good to put your `` section — biesior, Apr 03 '21 at 10:13

score 4 · Accepted Answer · answered Apr 03 '21 at 10:10

This is just an issue with the CSS selector:

button.numbers {
    width:33%;
}

Should be:

.numbers > button {
    width:33%;
}

Each button is a direct child of the .numbers class.

The original selector button.numbers would only select button elements that had a class of numbers (i.e. <button class="numbers" ...>).

score 4 · Answer 2 · answered Apr 03 '21 at 10:22

Explanation

HTML's class attribute does not inherit to children HTML tags.

Actually, only the section tag has set its class="numbers".

Fix

So you have to mind that for using a fitting CSS selector.

Either use

.numbers > button

to only match direct (first order) children of button elements within elements of class number

or use

.numbers button

to match any children of button elements within elements of class number.

Of course there are many more possibilities to specify special selection needs.

score 3 · Answer 3 · answered Apr 03 '21 at 10:11

3

it should be

.numbers button{
   width:33%;
 }

answered Apr 03 '21 at 10:11

The Undefined Coder

45
4

This is the correct approach – Rouhollah Mazarei Apr 03 '21 at 10:22
Your welcome. The main concept is choosing the correct selector. `.numbers button` says `select every 'button' tag that is inside an element with '.numbers' class. `.numbers > button` says `select every button tag that is DIRECT CHILD of the element with class 'numbers'`. – Rouhollah Mazarei Apr 03 '21 at 10:57

score 2 · Answer 4 · answered Apr 03 '21 at 10:12

2

button.numbers {
    width:33%;
}

This css selector means apply styles to button tag which has class as numbers. It would work on this

 <button class="numbers" type="button" value=1> 1</button>

Your button tag don't have class.

answered Apr 03 '21 at 10:12

Anuj Sharma

409
2
8

score 2 · Answer 5 · answered Apr 03 '21 at 10:22

The selector you have given specifies the with of each button element having the numbers class. Instead, you have wanted a selector that specifies each button children of an element having a numbers class:

.numbers > button {
    width: 33%;
}

<html>
<link rel="stylesheet" href="opmaak.css">
<body>
    <section class="numbers">
        <button type="button" value=1> 1</button>
        <button type="button" value=2> 2</button>
        <button type="button" value=3> 3</button><br>
    </section>
</body>
</html>

Why can't I change the width of html buttons on class level in css?

5 Answers5

Explanation

Fix