What is the definition of each css selector combination

Question

The . css files that are used follow a pattern:

seletor{
atributo: valor
}

The attributes and values part I understand, but in some examples I see these selectors being separated with ',' or with a '.' in front or a '#'. As in the examples:

 .s1{}
 #s1{}
 s1 s2{}
 s1,s2{}
 s1 *{}
 s1{}
.s1 a:link{}

These are some examples, what’s the difference between the two for me to know how to work the ideal?

Answer 1

When you put a . at the front, it means that you are selecting a class from an element <div class="minhaClasse"> in css I would select it with .minhaClasse {}.

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

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

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

Then the css would be: .elemento1 .elemento2 {}

When elements are separated by a comma, it means that you are declaring for both 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 the * means All, 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 selectors possible. there is the :hover which is for when the mouse cursor is on top of the element. :visited when the element that is a link has already been visited. :before and :after which create pseudo-elements, nth-child and nth-of-type selecting positions of elements. etc...

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

If you want to know more about all selectors I advice this site: http://www.w3schools.com/cssref/css_selectors.asp

It shows all and how to use :)

I hope it helped!

Answer 2

CSS

In the maujor’s website has a very good tutorial on CSS, I will leave here some relevant parts.

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 marking HTML identified by your name (for example: <p>, <h1>, <form>), by the name of a class applied to the element of the marking HTML (for example: .topo, .principal, .menu), by the name of an ID identifier applied to element of marking HTML (for example: #tudo, #auxiliar, #rodape) or by any other identifier CSS of elements or parts of the marking HTML, generically called selectors CSS.
• property: is the property of the element HTML to which the stylization defined in the value will be applied (for example: size of the font, text color, widget height).
• value: is the specific feature to be assumed by the property (for example, letter type Arial, blue, green background, height equal to 300px)

In the syntax of a rule CSS, type the selector and after property and value separated by two points and placed between keys { }.

It is possible to write more than one statement CSS in a rule with the aim to stylize various properties of the same selector. In this case a semicolon shall be used (;) to separate the statements CSS in the rule CSS. The semicolon is optional when the rule CSSis constituted by a single declaration CSSand also optional after the last declaration CSSwhen there is more than one statement CSS.

Grouping of Selectors

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

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

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

elemento.nomedaclasse { 
    propriedade: valor;
}

ID selector

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

It’s the same idea as the class, but the id is preceded by the # ("fencing"/"junk"/""):

#meuID {
    propriedade: valor;
}

Inserting comments into CSS

Comments on CSS start with the sign /* and ends with */:

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

In his example:

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

• e1 e2{}: the style will be applied inside the element e2 that’s inside e1, I’ll give you an example:

  • Suppose that e1 be the table and e2 to td, classy padrao:

    .table td.padrao { font-size: 10pt; color: red; }

    • All the td, who have the class padrao, of table will have font size 10pt and red color.

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

• e1{}: applies the style in e1, an example would be the body:

  body { min-width: 650px; }

• .e1 a:link{} = look at the example, it "changes" the style of a link when you hover over it:

  a:hover { background-color: yellow; }

Reference:

• CSS tutorial
• CSS syntax

Answer 3

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

We have 4 main selectors, which are:

• Element: Are native elements of HTML. Ex.: p, li, ul, H1, div, etc...
• ID: Defined with prefix # before its name. Ex.: #minhaId, #umestilo, etc...
• Class: Defined with prefix .. E.g. myClose, . myStyle, etc...
• Pseudo-Selector: These are HTML elements that we can obtain but cannot manually define in HTML. For example, I can select the second element using 'elemento':nth-child(2), but I can’t create this element in my HTML.

Take 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 these selectors will be pink.

For further reading on this, I recommend this reading: https://code.tutsplus.com/pt/tutorials/the-30-css-selectors-you-must-memorize--net-16048

Answer 4

The . is the element that contains class="" ... When we use class="" in HTML then in CSS we call the element with . (point), example:

HTML

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

CSS

.fundo-vermelho{
    background:red;
}

With # (fence/tic game) is the same only thing that applies to ID. When in HTML we use id so 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 following as E1 E2 means that we will apply the CSS command inside the element E2 that’s inside E1

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 comma, it means that the styles we are applying to one we apply also 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 using the element * then we will apply all the style to all elements within the element

When we don’t use . or # we only define the name of the element then it can only be that the style is 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 specified 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, it cannot be any name.

Answer 5

I’ll give an explanation the way I understand

.e1{}- When using the dot before any property, it means it will be applied in all classes with that name.

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

e1 e2{} - I don’t remember very well, I’ll look and post again when I find out.

e1, e2{} - Apply the style to the 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 style to all elements within e1.

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

.e1 a:link{} - All Elements containing the class e1 and own a property with a href.

Follow a link where you find all CSS selectors in which you can better orient yourself.