Especificidade é uma forma que o browser tem de aplicar os estilos mais relevantes a tal elemento que é alvo de diferentes seletores. Novamente, para você ver ele em prática o tal elemento desejado tem que ser alvo de ao menos mais de um seletor, tendo estes seletores relevâncias diferentes (não adianta selecionar o elemento usando um seletor de tipo). No geral: 1. Seletor de tipo e pseudo-elemento tem baixa especificidade. 2. Classes, pseudo-classes e seletor de atributo tem especificidade mediana. 3. Id tem especificidade alta, mas não para por aqui não. Tem especificade relacionada também a forma como você anexa a folha de estilo ao HTML. 1. Arquivos externos tem baixa especificade. 2. Estilos dá tag tem especificidade mediana. 3. Estilo inline tem alta especificade. A única coisa que supera ele é o !important. O !important não tem muito a ver com especificade, mas interage diretamente com isso. Você define ele a nível de declaração (ou seja, você coloca ele antes dos ; que fecha o conjunto propriedade/valor. Esse cara não é recomendado, pois ele quebra o fluxo natural das folhas de estilo do documento CSS, mas você pode usar ele para sobrescever estilos inline que por exemplo uma biblioteca tá colocando, ou para sobrescrever alguma estilo pertinente de algum agente externo. É bom deixar claro que, caso você tenha mais de um seletor separado por vírgula (lista de seletores) apenas o seletor que tiver a maior importância será considerado, ou seja, não se é somado a especificade. Ex.: h1#exemplo, h1.exemplo {} A especificade acima vai ser (1, 0, 1), não (1, 1, 2), pois apenas o seletor mais importante conta. A especificade também é relacionada também ao elemento alvo do seletor, ou seja: Ex.: h1#example, div.teste {} Nós temos a especificidade do 1° seletor (1, 0, 1) e a do segundo (0, 1, 1), mas ambos estão apontando para elementos diferentes. Enfim, caso queira saber mais olha o link: developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Parabéns pelo vídeo e pela humildade, a mãe das virtudes, que anda tão em falta ultimamente. Tiveste a a humildade de assumir publicamente que mesmo sendo um profissional, não sabia algo fundamental e teve de aprender. Obrigado por compartilhar seu conhecimento, fazendo da sua história um motivo para esse vídeo. Sucesso...
6:15 Ja tirou minha duvida, fiquei com receio de entrar no video pela duraçao, mas valeu a pena o video é longo porque vc explica e fala devagar e de uma forma que da para entender, SUCESSO NO CANAL , VIDEO TOP
Olá, parabéns pelo vídeo! Mas vale ressaltar que o devtools é o melhor amigo do desenvolvedor... É possível identificar facilmente qual foi o seletor que aplicou a estilização conflitante... Dá até para ir neutralizando os seletores até que o seu seletor consiga aplicar a estilização no(s) elemento(s) desejado(s)...
mto bom o video, por ex, n sabia q dava p ver a especificidade no visual studio code (no eclipse, dah tb?). seria legal um video sobre essa metodologia de css realmente, pois igual foi falado, as vezes, vc pega um projeto legado e fica dificil mudar e entao seria bom saber como deveria ser feito e como proceder em casos assim. parabens e obrigado. obs: comparado c outros videos aqui no youtube, achei o som um pouco baixo e tive que aumentar acima do limite que o notebook/windows entende como correto p n prejudicar a audição (65%).
Fala, Rogerio! Creio que nativamente, o eclipse não suporte. Talvez com alguma extensão ou algo assim do gênero você consiga alcançar o mesmo resultado. Mas seria bem prático! Sobre o vídeo sobre a metodologia, já está em produção 😉 Quanto a observação, agradeço demais pelo feedback! Estarei mais atento para os próximos vídeos! Forte abraço!
Cara 3u já queimei muito neurônio com isso, fico me perguntando quanto tempo ainda eu levaria pra descobrir isso sozinho? Apesar de que no curso web moderno o Leonardo fala sobre a prioridade dos seletores, não tinha gravado isso no meu "HD", vlw mermo bixo.
teste aqui: o meu P está tendo a maior especificidade consigo resolver adicionando um p com outro id alterando a cor Teste fiquei sem entender porque que o p está tendo a maior precedência ? (quando adiciono um p#aa#cc background ele não recebe a precedência, contem um elemento e dois ids porque não deu certo ? *TESTE* * * p{ color: red; } p#aa#cc{ color:violet; } p#aa#cc{ color:yellow; } p#aa#cc{ color:gray; }
excelente explicação , tudo lindo , mas tipo eu so trabalho em projetos meu com classe não uso id. a sua historia me parece mais preguiça de procurar ou estudar o projeto , pq em um projeto legado por exemplo se vc for pensar em mudar o css como vc ta falando que e o seu problema (do video) e fadado a esse tipo de bug , pq o certo na minha opinihão era procurar o id e mudar o backgrand pelo id , fazer outra classe no caso foi preguiça de procurar tentou ir pelo caminho mais facil
Eu diria que o maior culpado nesse projeto foi a desorganização de minha parte no projeto. Eu estava construindo a mesma app em React, Angular e Vue, e acabei me embananando com o nome dos arquivos. Daí juntamente com o cansaço, vem a preguiça hehe Mas essa era uma dica a qual esqueci de falar no vídeo, evitar usar ids e nisso concordo completamente contigo :)
Especificidade é uma forma que o browser tem de aplicar os estilos mais relevantes a tal elemento que é alvo de diferentes seletores. Novamente, para você ver ele em prática o tal elemento desejado tem que ser alvo de ao menos mais de um seletor, tendo estes seletores relevâncias diferentes (não adianta selecionar o elemento usando um seletor de tipo).
No geral:
1. Seletor de tipo e pseudo-elemento tem baixa especificidade.
2. Classes, pseudo-classes e seletor de atributo tem especificidade mediana.
3. Id tem especificidade alta, mas não para por aqui não.
Tem especificade relacionada também a forma como você anexa a folha de estilo ao HTML.
1. Arquivos externos tem baixa especificade.
2. Estilos dá tag tem especificidade mediana.
3. Estilo inline tem alta especificade. A única coisa que supera ele é o !important.
O !important não tem muito a ver com especificade, mas interage diretamente com isso. Você define ele a nível de declaração (ou seja, você coloca ele antes dos ; que fecha o conjunto propriedade/valor. Esse cara não é recomendado, pois ele quebra o fluxo natural das folhas de estilo do documento CSS, mas você pode usar ele para sobrescever estilos inline que por exemplo uma biblioteca tá colocando, ou para sobrescrever alguma estilo pertinente de algum agente externo.
É bom deixar claro que, caso você tenha mais de um seletor separado por vírgula (lista de seletores) apenas o seletor que tiver a maior importância será considerado, ou seja, não se é somado a especificade.
Ex.:
h1#exemplo, h1.exemplo {}
A especificade acima vai ser (1, 0, 1), não (1, 1, 2), pois apenas o seletor mais importante conta.
A especificade também é relacionada também ao elemento alvo do seletor, ou seja:
Ex.:
h1#example, div.teste {}
Nós temos a especificidade do 1° seletor (1, 0, 1) e a do segundo (0, 1, 1), mas ambos estão apontando para elementos diferentes.
Enfim, caso queira saber mais olha o link:
developer.mozilla.org/en-US/docs/Web/CSS/Specificity
toooooooop, eu estou começando agora no front end e não tinha entendido direito sobre especificidade, mas agora ficou claroooo
Hahahaha, a forma de comunicar as ideias da galera da Cod3r é sensacional! Especifici o quê? kkkkkkkkkkkk
Parabéns pelo vídeo e pela humildade, a mãe das virtudes, que anda tão em falta ultimamente. Tiveste a a humildade de assumir publicamente que mesmo sendo um profissional, não sabia algo fundamental e teve de aprender. Obrigado por compartilhar seu conhecimento, fazendo da sua história um motivo para esse vídeo. Sucesso...
6:15 Ja tirou minha duvida, fiquei com receio de entrar no video pela duraçao, mas valeu a pena o video é longo porque vc explica e fala devagar e de uma forma que da para entender, SUCESSO NO CANAL , VIDEO TOP
agora tudo faz sentido
Olá, parabéns pelo vídeo!
Mas vale ressaltar que o devtools é o melhor amigo do desenvolvedor... É possível identificar facilmente qual foi o seletor que aplicou a estilização conflitante... Dá até para ir neutralizando os seletores até que o seu seletor consiga aplicar a estilização no(s) elemento(s) desejado(s)...
mano esse video explodio minha mente !!!! vlw mano.
depois de décadas usando !important como uma mula...... finalmente aprendi de verdade kkkkkkkk
Rapaz lembro desse estagiario, dando aula de graphql kkkk
O tempo passa, grande Diego! hahaha
mto bom o video, por ex, n sabia q dava p ver a especificidade no visual studio code (no eclipse, dah tb?).
seria legal um video sobre essa metodologia de css realmente, pois igual foi falado, as vezes, vc pega um projeto legado e fica dificil mudar e entao seria bom saber como deveria ser feito e como proceder em casos assim.
parabens e obrigado.
obs: comparado c outros videos aqui no youtube, achei o som um pouco baixo e tive que aumentar acima do limite que o notebook/windows entende como correto p n prejudicar a audição (65%).
Fala, Rogerio!
Creio que nativamente, o eclipse não suporte. Talvez com alguma extensão ou algo assim do gênero você consiga alcançar o mesmo resultado. Mas seria bem prático! Sobre o vídeo sobre a metodologia, já está em produção 😉
Quanto a observação, agradeço demais pelo feedback! Estarei mais atento para os próximos vídeos! Forte abraço!
Cara 3u já queimei muito neurônio com isso, fico me perguntando quanto tempo ainda eu levaria pra descobrir isso sozinho? Apesar de que no curso web moderno o Leonardo fala sobre a prioridade dos seletores, não tinha gravado isso no meu "HD", vlw mermo bixo.
Video muito bom, só achei o áudio baixo, mas tá show!
Áudio está muito baixo mesmo. Tive que ir pra TV no último volume pra conseguir ouvir direto.
teste aqui: o meu P está tendo a maior especificidade
consigo resolver adicionando um p com outro id alterando a cor
Teste
fiquei sem entender porque que o p está tendo a maior precedência
?
(quando adiciono um p#aa#cc background ele não recebe a precedência, contem um elemento e dois ids porque não deu certo ? *TESTE*
*
*
p{
color: red;
}
p#aa#cc{
color:violet;
}
p#aa#cc{
color:yellow;
}
p#aa#cc{
color:gray;
}
Leo tá diferente.
hahaha
excelente explicação , tudo lindo , mas tipo eu so trabalho em projetos meu com classe não uso id. a sua historia me parece mais preguiça de procurar ou estudar o projeto , pq em um projeto legado por exemplo se vc for pensar em mudar o css como vc ta falando que e o seu problema (do video) e fadado a esse tipo de bug , pq o certo na minha opinihão era procurar o id e mudar o backgrand pelo id , fazer outra classe no caso foi preguiça de procurar tentou ir pelo caminho mais facil
Eu diria que o maior culpado nesse projeto foi a desorganização de minha parte no projeto. Eu estava construindo a mesma app em React, Angular e Vue, e acabei me embananando com o nome dos arquivos. Daí juntamente com o cansaço, vem a preguiça hehe Mas essa era uma dica a qual esqueci de falar no vídeo, evitar usar ids e nisso concordo completamente contigo :)