How do I identify which element/pseudo-element I have to pick up to assign some styling (css)?

Asked

Viewed 32 times

0

Example:

I have the following button and would like to add the property :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>

But if I inspect the element, the browser tools give me the following options: inserir a descrição da imagem aqui

My doubts are:

When there is ID for the element and class, I use which of the two ?

When the element is inside a DIV, I use the ID of the div ?

How do I know when to wear .algumCoisa or algumaCoisa#OutraCoisa to start the css of which ?

css
  • 1

    Just a hint, avoid always using ID to put css style in the element, always prefers to class, because with ID vc creates a very strong class and then can only change the style of the element using ! Import. So avoid this .algumaCoisa#OutraCoisa preferably for that reason: .algumaCoisa.OutraCoisa and in the element classe="algumaCoisa OutraCoisa"

2 answers

1

Well the id you should use when you want only that element to have its own style. In the html you assign a id to the element in that way id="umId" and in the css to style this id you use #umId.

With class you can style more than one element, whoever contains that assigned class will be stylized according to css. In the html Voce assigns a class this way class="algumaClasse" and in css you style this class like this: .algumaClasse

If you have an element within a div you must use the id element, as the id of div she who will be stylized.

If you come across in your file .css with algumaCoisa#OutraCoisa, That matches what you have algumaCoisa which can be an html with an id #OutraCoisa example: div#algumId that in the html is the same as <div id="algumId"></div>

1


Do as you see fit!

When there is ID for the element and class, I use which of the two ?

With the ID:

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

With class:

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

When the element is inside a DIV, I use the div ID ?

With inheritance (only children):

<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>

With inheritance (children, grandchildren, ...):

<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>

Recommended reading: CSS selectors

Browser other questions tagged css

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