class definitions do not apply in css

Asked

Viewed 35 times

0

I am doing a project where I am creating several different button styles, created buttons with class names like "button-default", "button-default-Empty". The problem is that I can’t get the first class css to be applied to the others, I can’t change the property to:Hover these classes.

.button-default{
    background-color: #49bf9d;
    border: 2px solid #49bf9d;
    color: white;
    padding: .75em 1.5em;
    border-radius: 5px;
    font-size: .9em;
}

.button-default-empty{
    background-color: white;
    border: 2px solid #efefef;
    color: inherit;
}

.button-default-empty a:hover{
    color:#49bf9d;
    background-color: #49bf9d; 

}
  <label for="nome">Nome</label>
  <textarea name="mensagem" id="mensagem"></textarea>    
  <input class="button-default" type="submit" value="Enviar">
  <a href="#" title="limpar" class="button-default-empty">Limpar</a>

html css

  • You need to specify your problem better, the style is being applied correctly. Your hover is not working because the correct would be: .button-default-empty:hover.

  • I’m actually doing a font-end course and in this course the teacher created these 2 classes, the difference in his second class porjeto inherited all the definitions of the first just by changing what was added in the second class, I tried to do it the same way but as you can see it didn’t work

1 answer

0

"- I can’t get the first class css to be applied to the others"

This is a bit confusing. If you want an element to be stylized "with both classes", just define the two classes in the element:

.button-default{
    background-color: #49bf9d;
    border: 2px solid #49bf9d;
    color: white;
    padding: .75em 1.5em;
    border-radius: 5px;
    font-size: .9em;
}

.button-default-empty{
    background-color: white;
    border: 2px solid #efefef;
    color: inherit;
}
        <input class="button-default" type="submit" value="button-default">
        <input class="button-default-empty" type="submit" value="button-default-empty">
        <input class="button-default button-default-empty" type="submit" value="button-default + button-default-empty">

"- I cannot change the property to:Hover of these classes"

Just add the :hover right in class:

.button-default-empty{
    background-color: white;
    border: 2px solid #efefef;
    color: inherit;
}
.button-default-empty:hover{
    color:#49bf9d;
    background-color: #49bf9d;
}
<input class="button-default-empty" type="submit" value="button-default-empty">

Notice that at no time did I inform the tag element. Therefore, any element you define with these classes will be stylized with these properties.

Notice that statement:

.button-default-empty a:hover {
    color:#49bf9d;
    background-color: #49bf9d;
}

You define that any element a who is the child of any class element button-default-empty (no matter the level) is stylized in the event :hover. See working:

.button-default-empty a:hover {
    color:#49bf9d;
    background-color: #49bf9d;
}
<div class="button-default-empty">
    <a href="#">Um link filho da classe button-default-empty</a>
    <div>
        <div>
            <a href="">Um outro link, digamos que, filho da classe button-default-empty</a>
        </div>
    </div>
</div>

Recommended reading: CSS selectors

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.