![\"css4\"](\"http:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/01\/css4.jpg\")
<\/p>\n<\/p>\n
Pois \u00e9 o css4, mas na verdade o correto n\u00e3o \u00e9 CSS4 e sim Seletores de Level 4, pois o css 3 como o html 3 foram divididos em m\u00f3dulos, e assim tendo novas mudan\u00e7as e claro como sempre cada novidade vem sempre para favorecer a nos programadores. Vamos l\u00e1 vamos entender um pouco sobre css4 e suas principais mudan\u00e7as em rela\u00e7\u00e3o ao anterior.<\/p>\n
Uma das novas e mais potentes mudan\u00e7as que houve no css, foi a possibilidade de alterar estilo de uma tag pegando como referencia seus filhos, veja abaixo e entenda melhor<\/p>\n
$div a.home {...}<\/code><\/pre>\naqui estamos selecionando todas as div’s que tiverem dentro um elemento <a> com a classe home, e n\u00e3o o a.home<\/p>\n
Nos podemos tamb\u00e9m misturar com v\u00e1rios outros elementos e chamadas, sem a necessidade de encher seu c\u00f3digo de id’s ou class.<\/p>\n
$div > span {...}<\/code><\/pre>\nAqui estaremos estilizando todas as divs que tiverem um filho span diretamente;<\/p>\n
$div > span:only-child {...}<\/code><\/pre>\nAqui todas que tiverem dentro apenas um elemento span.<\/p>\n
:not()<\/h2>\n
O :not() j\u00e1 esta presente no css 3 mas \u00e9 importante mostrar sua funcionalidade que agora pode receber mais de um seletor.<\/p>\n
*:not(h1, strong) {...}<\/code><\/pre>\naqui selecionamos o estilo para todos os elementos, exceto h1, e strong.<\/p>\n
input:not(:checked) {...}<\/code><\/pre>\nDamos o estilo para todos os input, com exce\u00e7\u00e3o dos checked<\/p>\n
:matches()<\/h2>\n
Este sem d\u00favidas 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\u00e3o mais precisando fazer um monte de linhas de c\u00f3digo.<\/p>\n
div:matches(span, small) {...}<\/code><\/pre>\nOlha s\u00f3 que incrivel, ele seleciona todos os span, e small que estiverem dentro da div, genial n\u00e3o ? e ainda pode melhorar olhe s\u00f3.<\/p>\n
:matches(section, div.imagem) img {...}<\/code><\/pre>\nAqui selecionamos todas as img que estiverem dentro da section e da div com classe imagem<\/p>\n
input:matches(:focus, :hover) {...}<\/code><\/pre>\nAqui selecionamos os inputs, com seus estados de :focus que \u00e9 quando estamos dentro do input e :hover que \u00e9 ao passar o mouse sobre ele.<\/p>\n