CSS4 Vem ai

CSS4

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 <a> 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.

Veja mais sobre esta novidade clicando aqui. e Lembre-se, este novo modulo de css esta ainda em fase de rascunho/teste e pode ocorrer mudanças ate sua forma final, mas é bom já ir mantendo-se atualizado sobre o que isso sera capaz de fazer e em que ira lhe ajudar.

E ai, o que achou dos novos seletores ? Gostaram ? Espero que sim pois eu gostei. Por em quanto é isso, qualquer dúvida deixe nos comentários, ou mande um e-mail que eu lhe ajudarei.