CSS 4 existe? O que tem de diferente do CSS 3? Os navegadores ja suportam? Estava procurando sobre CSS 3 no Google e vi algumas pessoas mencionarem o CSS 4.
Pois é o css4, mas na verdade o correto não é CSS4 e sim Seletores de Level 4, pois o css 3 como o html 3 foram divididos em módulos, e assim tendo novas mudanças e claro como sempre cada novidade vem sempre para favorecer a nos programadores. Vamos lá vamos entender um pouco sobre css4 e suas principais mudanças em relação ao anterior.
$div .classe Uma das novas e mais potentes mudanças que houve no css, foi a possibilidade de alterar estilo de uma tag pegando como referencia seus filhos, veja abaixo e entenda melhor
$div a.home {...} aqui estamos selecionando todas as div’s que tiverem dentro um elemento com a classe home, e não o a.home
Nos podemos também misturar com vários outros elementos e chamadas, sem a necessidade de encher seu código de id’s ou class.
$div > span {...} Aqui estaremos estilizando todas as divs que tiverem um filho span diretamente;
$div > span:only-child {...} Aqui todas que tiverem dentro apenas um elemento span.
:not() O :not() já esta presente no css 3 mas é importante mostrar sua funcionalidade que agora pode receber mais de um seletor.
*:not(h1, strong) {...} aqui selecionamos o estilo para todos os elementos, exceto h1, e strong.
input:not(:checked) {...} Damos o estilo para todos os input, com exceção dos checked
:matches() Este sem dúvidas vai facilitar muito o nosso trabalho, ele nada mais faz que seleciona e da estilo para todos os seletores dentro de um, sendo assim não mais precisando fazer um monte de linhas de código.
div:matches(span, small) {...} Olha só que incrivel, ele seleciona todos os span, e small que estiverem dentro da div, genial não ? e ainda pode melhorar olhe só.
:matches(section, div.imagem) img {...} Aqui selecionamos todas as img que estiverem dentro da section e da div com classe imagem
input:matches(:focus, :hover) {...} Aqui selecionamos os inputs, com seus estados de :focus que é quando estamos dentro do input e :hover que é ao passar o mouse sobre ele.
Mais em:
-
1
-
-
1
-
o artigo não é de minha autoria, só coloquei na resposta pq pode algum dia não estar mais publicado e a fonte não funcionar mais. – Leo Caracciolo 27/05/17 às 23:34