What is the definition of each combination of css Selectors

When you put a # in front, it means that you are selecting an ID of an element <div id="minhaId"> in css would be #minhaId {}

When you have 2 selectors followed as e1 e2 means hierarchy, it will select every two elements that are within element 1

<div class="elemento1">
    <div class="elemento2">
    </div>
</div>

Then css would look like: .elemento1 .elemento2 {}

When the elements are separated by commas, it means that you are declaring for the two elements

<div class="elemento1"></div>
<div class="elemento2"></div>

Then the css would be: elemento1, elemento2 {} and what is declared will be interpreted for both elements.

When using * means Everyone, if it is followed after some other element, what is declared will be interpreted for all elements from its hierarchy.

Now the elements followed by : are already several types of possible selectors. there is :hover that is for when the mouse cursor is on top of the element. :visited for when the element that is a link has already been visited. :before and :after that create pseudo-elements, nth-child and nth-of-type that select element positions. etc ...

And other than the ones you mentioned in the example, there are other types of selectors: ~ [prop=valor] etc ...

If you would like to know more about all the selectors I would recommend this site: link

It shows everything and how to use it:)

I hope you have helped!

CSS

In the Maujor site has a very good CSS tutorial, I'll leave some relevant parts here.

The CSS rule has its own syntax and defines how the style will be applied to HTML elements:

seletor { propriedade: valor; }

  

• selector : is an element of the HTML tag identified by its name (for example: <p> , <h1> , <form> ), by the name of a class   applied to the HTML markup element (for example: .topo ,    .principal , .menu ), by the name of an ID identifier applied to the   element of markup HTML (for example: #tudo , #auxiliar ,    #rodape ) or any other identifier CSS of elements or   excerpts from the HTML labeling, generally referred to as selectors    CSS .
  
• property : is the property of the HTML element to which the stylization defined in the value will be applied (for example:   font, text color, element height).
  
• value : is the specific characteristic to be assumed by the property (for example: arial type letter, blue color, green background,   height equal to 300px)
  

In the syntax of a CSS rule, the selector is written and then the   property and value separated by a colon and placed between   keys { } .

     

It is possible to write more than one CSS statement in a rule with the   multiple properties of the same selector.   In this case, a semicolon (% with%) must be used to separate the    ; declarations contained in the CSS rule. The semicolon is   optional when the CSS rule consists of a single declaration    CSS and also optional after the last CSS statement when there is   more than one CSS statement.

Selector Grouping

The rule will be applied to more than one selector, just use the comma ( CSS ).

h1, h2, p, .box {
    color: green;
}

Class Selector You can create a rule for a specific class and place it in HTML as the , attribute. In your CSS code, use the name of your class preceded by a dot ( class ):

elemento.nomedaclasse { 
    propriedade: valor;
}

ID Selector

  

The big difference between the id selector and the selector is the oneness.   That is, a id selector of a given name can only be set to one   and only a . element within the document.

It is the same idea of the class, but HTML is preceded by id ("cerquilha" / "tralha" / "

#meuID {
    propriedade: valor;
}

Inserting comments in CSS

CSS comments start with # sign and ends with /* :

/* este é um comentário*/
p { 
font-size: 14px;               /* este é outro comentário*/
    color: #000;
    font-family: Arial, Serif;
}

In your example :

• */ : style will be applied in class .e1{}
• .e1 : style will be applied in id #e1{}

• #e1 : the style will be applied inside the e1 e2{} element that is within e2 , I'll give you an example:

  • Suppose that e1 is e1 and table to e2 , which has class td :

    padrao

    • All .table td.padrao { font-size: 10pt; color: red; } , having td , padrao will have font size table and red color.

• 10pt : applies style in both.
• e1,e2{} : applies style to all elements within e1 *{} ,

• e1 : apply style in e1{} , an example would be e1 :

  body

• body { min-width: 650px; } = looks at the example, it "changes" the style of a link when you hover over it:

  .e1 a:link{}

Reference:

• CSS Tutorial
• CSS Syntax

Each definition method implies directly how the style is assigned to the element, class, or id in your HTML.

We have 4 main selectors, which are:

• Element: These are native HTML elements. Ex: p, li, ul, h1, div, etc ...
• ID: Defined with prefix # before its name. Ex: #minhaId, #umStyle, etc ...
• Class: Defined with . prefix. Example: .minhaClass, .meStyle, etc ...
• Pseudo-Selector: These are HTML elements that we can get but that we can not manually define in HTML. For example, I can select the second element using 'elemento':nth-child(2) , but I can not create this element in my HTML.

See the example:

div {
    color: blue;
}

#sublinhado {
    text-decoration: underline;
}

.negrito {
    font-weight: bold;
}

ul li:nth-child(2) {
    color: red;
}

<div>Elemento: Texto em cor azul</div>

<div id="sublinhado">ID: Texto azul e sublinhado</div>


<div class="negrito">Classe: Texto azul e em negrito</div>

<ul>
    <li>Pseudo: Primeiro - normal</li>
    <li>Pseudo: Segundo - cor vermelha</li>
<ul>

Therefore, the order they are declared interferes with the final result taking into account their HTML structure.

For example, comma-separated settings will apply the same attributes to different selectors.

h1, #meuId, .minhaClasse, p:nth-child(3) {
    color: pink;
}

In this case, all of these selectors will be pink.

For a closer look at this, I recommend this reading: link

HTML

<div class="fundo-vermelho">Aqui vai ser um fundo vermelho colocado via class</div>

CSS

.fundo-vermelho{
    background:red;
}

With # (old game's checker / game) is the same thing only that applies to ID . When in HTML we use id then in CSS we use #

HTML

<div id="fundo-azul">Aqui vai ser um fundo azul colocado via ID</div>

CSS

.fundo-azul{
    background:blue;
}

When we use 2 elements like e1 e2 it means that we are going to apply the CSS command inside the element e2 that is inside e1 / p>

HTML

<div class="box">
    <div class="conteudo">
       Esse é o conteúdo
    </div>
</div>

CSS

.box .conteudo{
    font-weight:bold;
    background:pink
}

When we separate the element by a comma, it means that the style we are applying to one will also apply to the other

HTML

<div id="elemento1">Elemento 1</div>
<div class="elemento2">Elemento 2</div>
<div id="elemento3">Elemento 3</div>

CSS

#elemento1, .elemento2, #elemento3{
    background:red;
}

When you use the element * then we'll apply the entire style to all elements within element

When we do not use . or # we only set the name of the element so the style can only be attributed to tags

HTML

<a href="">Aqui vai ser um fundo vermelho colocado via class</a>

CSS

a{
    background:purple;
}

And when we use something like : hover (pseudo-elements) are to apply the style to specific parts of the element. I'll give an example of the link ( <a> )

HTML

<a href="" id="meu-link">Passe o mouse aqui</a>

CSS

#meu-link:hover{
    background:red;
}

Pseudo-elements are specific items, that is, they can not be any name.

I'll give you an explanation of the way I understand

.e1{} - When you use the point before some property, it means that it will be applied to all classes with that name.

#e1{} - When we have a Game of the Old / Hashtag indicates that the following style will be applied to the element with the ID e1 .

e1 e2{} - I do not remember very well, I'll search and re-post when I find out.

e1, e2{} - Applies the style properties with the following tag, in case e1 and e2. this to summarize your code, thus not having duplicity of styles for different tags.

e1 *{} - Applies the style for all elements within e1 .

e1{} - All e1 elements will have the style set.

.e1 a:link{} - All Elements that contain class e1 e have a property a with a href.

Follow a link where you can find all CSS Selectors where you can get a better orientation.