0

Exemplo:

Eu tenho o seguinte botão e gostaria de adicionar a propriedade :hover

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>

</style>
</head>
<body>
 <div class="botaoDesloga">
            <button type="button" class="btn btn-danger  btnSair" title="Sair" id="divBtnSair" style="background-color: #4d004d; border-color: #4d004d;"> <i class="fa fa-power-off"></i>  </button>
        </div>

</body>
</html>

Mas se inspeciono o elemento, o tools do browser me da as seguintes opções: inserir a descrição da imagem aqui

Minhas dúvidas são:

Quando existir ID para o elemento e classe, eu uso qual dos dois ?

Quando o elemento esta dentro de um DIV, eu uso o ID da div ?

Como eu sei quando tenho que usar .algumCoisa ou algumaCoisa#OutraCoisa para iniciar o css do cujo dito ?

1
  • 1
    Só uma dica, evite sempre usar ID para colocar estilo css no elemento, sempre de preferencia ara classe, pois com ID vc cria uma classe muito forte e depois só consegue mudar o estilo do elemento usando !important. Então evite isso .algumaCoisa#OutraCoisa de preferencia por isso: .algumaCoisa.OutraCoisa e no elemento classe="algumaCoisa OutraCoisa"
    – hugocsl
    18/01/2019 às 13:48

2 Respostas 2

1

Faça como achar melhor!

Quando existir ID para o elemento e classe, eu uso qual dos dois ?

Com o ID:

#id_do_elemento {
    /* estilização */
}

Com a classe:

.classe_do_elemento {
    /* estilização */
}

Quando o elemento esta dentro de um DIV, eu uso o ID da div ?

Com herança (apenas filhos):

<style type="text/css">
    div#id_da_div > div {
        /* estilização */
    }
</style>

<div id="id_da_div">
    <div>Esta div será estilizada</div>
    <div>
        Esta div também será estilizada
        <div>Esta div NÃO será estilizada</div>
    </div>
</div>

Com herança (filhos, netos, ...):

<style type="text/css">
    div#id_da_div div {
        /* estilização */
    }
</style>

<div id="id_da_div">
    <div>Esta div será estilizada</div>
    <div>
        Esta div também será estilizada
        <div>Esta div também será estilizada</div>
    </div>
</div>

Leitura recomendada: Seletores CSS

1

Bem o id você deve usar quando quer que somente aquele elemento tenha um estilo próprio. No html você atribui um id ao elemento dessa forma id="umId" e no css para estilizar esse id você usa #umId.

Já com class você pode estilizar mais de um elemento, quem conter aquela class atribuída sera estilizado conforme no css. No html voce atribui uma class dessa forma class="algumaClasse" e no css você estiliza essa class assim: .algumaClasse

Se você tem um elemento dentro de uma div você deve usar o id do elemento, pois se usar o id da div ela que será estilizada.

Se caso você se deparar no seu arquivo .css com algumaCoisa#OutraCoisa, isso condiz que você tem algumaCoisa que pode ser uma html com um id #OutraCoisa exemplo: div#algumId isso no html é o mesmo que <div id="algumId"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .