Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Conjunto de seletores mais específico

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web

por Axell Brendow Batista Moreira
| 110.7k xp | 130 posts
Software Engineer

Tenho o seguinte código HTML:

<section class="secao-inicio blog">

    <h2>Blog</h2>

    <small>Últimos posts</small>

    <ol> <!-- ordered list -->
        <li class="artigo-mais-recente">
            <a href="../blog/blog.html"> O essencial de design responsivo </a>

            <p class="texto-artigo-mais-recente"><em>Design</em> responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas <em>web</em> para dispositivos móveis. <strong>Mas como começar?</strong></p>
        </li>

E o seguinte CSS:

.blog li a
{
    color: #FCF;
}

.artigo-mais-recente a
{
    color: #F26;
}

E eu percebi que a cor do seletor ".blog li a" tem prioridade sobre a cor do seletor ".artigo-mais-recente a".

O que foi uma grande surpresa pra mim, pois a lógica me leva a entender que a classe ".artigo-mais-recente" é muito mais interna e específica do que a ".blog".

Na minha opinião, ".blog li a" é muito mais geral do que ".artigo-mais-recente a"

Alguém poderia explicar como isso acontece ?

Obs.: Ao colocar ".blog" antes de ".artigo-mais-recente a" esse novo seletor passar a ter prioridade sobre o ".blog li a".

2 respostas
solução!
por andreza.luchini
| 54.5k xp | 11 posts
Instrutor

Olá Breno, tudo bem?

Cada tipo de seletor tem um valor diferente quando o navegador os interpreta e aplica suas propriedades, isso faz parte da especificidade do CSS.

O seletor de tag é bem genérico, e o valor de especificidade dele é 001.

O seletor de classe é um pouco mais específico e tem valor de especificidade de 010.

O seletor de ID é bem específico e seu valor de especificidade é de 100.

Para seletores compostos como os do seu exercício, precisamos somar os valores de especificidade de cada parte do seletor:

.blog = 010
li = 001
a = 001
.blog li a = 012

.artigo-mais-recente = 010
a = 001
.artigo-mais-recente a = 011

Quanto maior o valor da especificidade do seletor, maior a prioridade de seu valor, dessa maneira um seletor com valor de especificidade 012 sobrescreve as propriedades conflitantes para o mesmo elemento que um seletor com valor de especificidade 011.

Por isso que o seletor ".blog li a" tem prioridade sobre o seletor ".artigo-mais-recente a".

Espero ter ajudado.

por Axell Brendow Batista Moreira
| 110.7k xp | 130 posts
Software Engineer

Ótima resposta Andreza!

Muito obrigado pela ajuda. Achei interessante esse sistema interno do CSS, mas me questiono sobre o porquê de não ser comentado no curso. Seria um diferencial. Porém sei que poderia parecer complicado para algumas pessoas.