10

Os arquivos .css que são usados seguem um padrão:

seletor{
atributo: valor
}

A parte dos atributos e valores eu entendo, porém em alguns exemplos vejo estes seletores são sendo separados com ',' ou com um '.' na frente ou um '#'. Como nos exemplos:

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

Estes são alguns exemplos, qual a diferença de ambos para eu saber como trabalhar o ideal?

5 Respostas 5

12

Quando se coloca um . na frente, significa que você está selecionando uma classe de um elemento <div class="minhaClasse"> no css eu selecionaria ele com .minhaClasse {}.

Quando se coloca um # na frente, significa que você está selecionando uma ID de um elemento <div id="minhaId"> no css ficaria #minhaId {}

Quando se tem 2 seletores seguidos como e1 e2 significa hierarquia, ele selecionara todo elemento dois que se encontra dentro do elemento 1

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

Ai o css ficaria: .elemento1 .elemento2 {}

Quando os elementos são separados por vírgula, significa que você está declarando para os dois elementos

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

Então o css ficaria: elemento1, elemento2 {} e o que for declarado será interpretado para ambos os elementos.

Quando se usa o * significa Todos, se ele estiver seguido depois de algum outro elemento, o que for declarado sera interpretado para todos os elementos a partir de sua hierarquia.

Agora os elementos seguidos por : são já vários tipos de seletores possíveis. existe o :hover que é para quando o cursor do mouse estiver em cima do elemento. :visited para quando o elemento que seja um link já tenha sido visitado. :before e :after que criam pseudo-elementos, nth-child e nth-of-type que selecionam posições de elementos. etc...

E além dos que você citou no exemplo, existem outros tipos de seletores: ~ [prop=valor] etc...

Caso queira saber mais sobre todos os seletores eu conselho este site: http://www.w3schools.com/cssref/css_selectors.asp

Ele mostra todo e como usar :)

Espero que tenha ajudado!

1
  • Sensacional sua explicação, obrigado.
    – Roknauta
    Commented 10/11/2016 às 10:52
12

CSS

No site do Maujor tem um tutorial sobre CSS muito bom, vou deixar aqui algumas partes relevantes.

A regra CSS tem sua própria sintaxe e define como o estilo será aplicado aos elementos do HTML:

seletor { propriedade: valor; }
  • seletor: é um elemento da marcação HTML identificado pelo seu nome (por exemplo: <p>, <h1>, <form>), pelo nome de uma classe aplicada ao elemento da marcação HTML (por exemplo: .topo, .principal, .menu), pelo nome de um identificador ID aplicado ao elemento da marcação HTML (por exemplo: #tudo, #auxiliar, #rodape) ou por qualquer outro identificador CSS de elementos ou trechos da marcação HTML, genericamente denominados de seletores CSS.
  • propriedade: é a propriedade do elemento HTML ao qual será aplicada a estilização definida no valor (por exemplo: tamanho da fonte, cor do texto, altura do elemento).
  • valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, altura igual a 300px)

Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e o valor separados por dois pontos e colocados entre chaves { }.

É possível escrever mais de uma declaração CSS em uma regra com o objetivo de estilizar-se várias propriedades de um mesmo seletor. Neste caso deve-se usar ponto-e-vírgula (;) para separar as declarações CSS constantes da regra CSS. O ponto-e-vírgula é facultativo quando a regra CSSfor constituída de uma só declaração CSSe também facultativo após a última declaração CSSquando houver mais de uma declaração CSS.


Agrupamento de Seletores

A regra será aplicada a mais de um seletor, basta utilizar a vírgula(,).

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


Seletor classe Você pode criar uma regra para uma classe específica e colocá-la no HTML como o atributo class. No seu código CSS, utilize o nome da sua classe precedido de ponto(.):

elemento.nomedaclasse { 
    propriedade: valor;
}


Seletor ID

A grande diferença entre o seletor id e o de classe é a unicidade. Ou seja, um seletor id de determinado nome só pode ser definido a um e somente um elemento HTML dentro do documento.

É a mesma ideia da classe, porém o id é precedido do # ("cerquilha"/"tralha"/"jogo-da-velha"):

#meuID {
    propriedade: valor;
}


Inserindo comentários nas CSS

Comentários em CSS começam com o sinal /* e termina com */:

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


No seu exemplo:

  • .e1{}: estilo será aplicado na classe .e1
  • #e1{}: estilo será aplicado no id #e1
  • e1 e2{}: o estilo será aplicado dentro do elemento e2 que está dentro de e1, vou te dar um exemplo:

    • Suponha que e1 seja a table e e2 a td, que tem a classe padrao:

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

      • Todas as td, que tiverem a classe padrao, da table terão tamanho da fonte 10pt e cor vermelha.


  • e1,e2{}: aplica o estilo nos dois.
  • e1 *{}: aplica o estilo para todos os elementos dentro de e1,
  • e1{}: aplica o estilo no e1, um exemplo seria o body:

    body { min-width: 650px; }


  • .e1 a:link{} = olha o exemplo, ele "muda" o estilo de um link quando você passa o mouse sobre ele:

    a:hover { background-color: yellow; }


Referência:

6

Cada método de definição implica diretamente como o estilo é atribuído ao elemento, classe ou id em seu HTML.

Possuímos 4 seletores principais, que são:

  • Elemento: São elementos nativos do HTML. Ex.: p, li, ul, h1, div, etc...
  • ID: Definido com prefixo # antes do seu nome. Ex.: #minhaId, #umEstilo, etc...
  • Classe: Definido com prefixo .. Ex.: .minhaClasse, .meuEstilo, etc...
  • Pseudo-Selector: São elementos HTML que podemos obter mas que não podemos definir manualmente no HTML. Por exemplo, eu posso selecionar o segundo elemento usando 'elemento':nth-child(2), mas eu não consigo criar esse elemento em meu HTML.

Veja o exemplo:

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>


Portanto, a ordem que eles são declarados interfere no resultado final levando em consideração sua estrutura HTML.

Por exemplo, definições separadas por vírgulas irão aplicar os mesmos atributos a diferentes seletores.

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

Neste caso, todos esses seletores terão a cor rosa.

Para uma leitura mais aprofundada nisso, recomendo essa leitura: https://code.tutsplus.com/pt/tutorials/the-30-css-selectors-you-must-memorize--net-16048

3

O . é o elemento que contém class="" ... Quando utilizamos class="" no HTML então no CSS chamamos o elemento com . (ponto), exemplo:

HTML

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

CSS

.fundo-vermelho{
    background:red;
}

Com # (cerquilha/jogo da velha) é a mesma coisa só que se aplica a ID. Quando no HTML usamos id então no CSS usamos #

HTML

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

CSS

.fundo-azul{
    background:blue;
}

Quando usamos 2 elementos seguindos como e1 e2 quer dizer que vamos aplicar o comando CSS dentro do elemento e2 que está dentro de e1

HTML

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

CSS

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

Quando separamos o elemento por vírgula, quer dizer que os estilo que estamos aplicando a um vamos aplicar também para o outro

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

Quando se usa o elemento * então vamos aplicar todo o estilo a todos elementos dentro do elemento

Quando não utilizamos . ou # só definimos o nome do elemento então só pode ser que o estilo seja atribuido a tags

HTML

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

CSS

a{
    background:purple;
}

E quando utilizamos algo como :hover (pseudo-elementos) são para aplicar o estilo em partes especificas do elemento. Vou dar um exemplo do link (<a>)

HTML

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

CSS

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

Os pseudo-elementos são itens especificos, ou seja, não pode ser qualquer nome.

1

Vou dar uma explicação da maneira que eu entendo

.e1{}- Quando usado o ponto antes de alguma propriedade, quer dizer que será aplicado em todas as classes com esse nome.

#e1{} - Quando temos um Jogo da Velha/Cerquilha/Hashtag indica que o estilo a seguir será aplicado no elemento com o ID e1.

e1 e2{} - Não me lembro muito bem, vou procurar e volto a postar quando descobrir.

e1, e2{} - Aplica o estilo as propriedades com a seguinte tag, no caso e1 e e2. isso para resumir seu código, assim não tendo duplicidade de estilos para tags diferentes.

e1 *{} - Aplica o estilo para todos os elementos dentro de e1.

e1{} - Todos os elementos e1 terão o estilo definido.

.e1 a:link{} - Todos os Elementos que contem a classe e1 e possuem uma propriedade a com um href.

Segue um link aonde você encontra todos os Seletores do CSS no qual você pode se orientar melhor.

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 .