O documento descreve as novidades trazidas pelo CSS4, incluindo novos seletores como :in-range, :out-of-range, :optional, :required, :matches e :not, permitindo selecionar elementos de forma mais precisa. Além disso, apresenta seletores futuros como :blank, :any-link e :has, expandindo ainda mais as possibilidades de seleção.

1. CSS4
Fellyph Cintra
TechTalk elo7

2. CSS 4
➤ O CSS3 já está ai com força total, mas poucos
sabem que o CSS4 já está em rascunho e muitas
das novidades desta versão são os novos
seletores.

3. RANGE
➤ Hoje com os novos seletores é
possível tratar elementos que
estão limitados por um range,
com as pseudo-classes in-
range e out-of-range.

4. RANGE
<form>
<input type='number' id='quantidade' min='1' max='5' />
</form>
input[type="number"]:in-range {
border-color: green;
}
input[type="number"]:out-of-range {
border-color: red;
}

5. OPTIONALITY
➤ As pseudo-classes de opcionalidade server para tratar
elementos inputs ou formulários que são obrigatórios ou não.

6. OPTIONALITY
<form>
<input type='email' placeholder='Seu email' required/>
<input type='text' placeholder='Seu nome' optional/>
</form>
input:optional {
border-style: dotted;
}
input:required {
border-color: red;
}

7. MUTABILITY
➤ As pseudo-classes de
mutabilidade representam os
elementos que permitem ou
não alteração pelo usuário.

8. MUTABILITY
<p contenteditable='false'>Apenas de leitura</p>
<p contenteditable='true'>Conteúdo editável</p>
<form>
<input type='text' value='Olar amigo' readonly>
<input type='text' value='Olar amigo 2'>
</form>
input:read-only, p:read-only {
background: red;
}
:read-write {
background: green;
}

9. MATCHES
➤ O pseudo-class :matches(-webkit-any, -moz-any) ajudam a
realizar seletores de agrupamento mais simples.
http://jsfiddle.net/fellyph/b6e5xx3m/4/

10. MATCHES
<ul>
<li>Mensagem 1</li>
<li class='fechado'>Mensagem 2</li>
<li class='nao-lida'>Mensagem 3</li>
<li class='cancelado'>Mensagem 4</li>
</ul>
li:-webkit-any(.fechado, .cancelado, .nao-lida) {
color: red;
}
li:-moz-any(.fechado, .cancelado, .nao-lida) {
color: red;
}

11. MATCHES
p:-webkit-any(.fechado, .cancelado, .nao-lido) {
color: red;
}
/* equivalente:
p.fechado, p.nao-lida, p.cancelado {
color: red;
}
*/

12. NÍVEIS DE MATCHES

13. NÍVEIS DE MATCHES

14. NOT
➤ Presente no CSS3, agora ele
possui suporte para receber
mais de um argumento no
CSS4. Este seletor aplica a
regra aos elementos que
não se aplica ao seletor,
sendo assim o oposto o
macthes.

15. NOT
<ul>
<li>Mensagem 1</li>
<li class='fechado'>Mensagem 2</li>
<li class='nao-lida'>Mensagem 3</li>
<li class='cancelado'>Mensagem 4</li>
</ul>
li:not(.fechado, .cancelado) {
color: red;
}
Sem suporte para seletor composto

16. FUTUROLOGIA

17. :BLANK
➤ Seleciona elementos sem
conteúdo diferente do :empty
não considera espaço em
branco conteúdo válido.

18. :BLANK
<p>Olar</p>
<p></p>
<p> </p>
p {
width: 50px;
height: 50px;
background: yellow;
}
p:empty {
background: lime;
}
p:blank {
background: red;
}

19. :ANY-LINK
➤ Seleciona qualquer tipo de
link em qualquer estado

20. :ANY-LINK
:link, :visited {
color: #555;
}
:any-link {
color: #555;
}
Sem suporte

21. :HAS
➤ Verifica se existe o elemento
passado como parâmetro.
Possui um comportamento
similar ao jQuery .has()

22. :HAS
<ul>
<li>Item</li>
<li>Item
<ul>
<li>Sub item</li>
</ul>
</li>
</ul>
li:has(> ul) {
color: red;
}

23. CASE INSENSITIVE
➤ Permite selecionar
atributos, com qualquer
tipo de combinação entre
letras maiúsculas e
minúsculas.

24. CASE INSENSITIVE
<ul>
<li><a href="test.pdf">Test </a></li>
<li><a href="test.PDF">Test </a></li>
<li><a href="test.pDF">Test </a></li>
</ul>
a[href$="pdf" i] {
color: red;
}
Sem suporte

25. DIRECTION
➤ Pseudo-classes que selecionam os itens de acordo a direção de
texto
<div dir="ltr"> Some text Default writing direction. </div>
<div dir="rtl"> ‫$جاه‬$‫ت‬‫اال‬ ‫$يسار‬$‫ل‬‫ا‬ ‫$ى‬‫ل‬‫إ‬ ‫$يمني‬$‫ل‬‫ا‬ ‫$ن‬‫م‬ ‫$نصوص‬$‫ل‬‫ا‬ ‫$عض‬‫ب‬ </div>
:dir(ltr) {
color: red;
}
:dir(rtl) {
color: blue;
}

26. DÚVIDAS

27. OBRIGADO

28. REFERÊNCIAS
➤ http://css4.rocks/selectors-level-4/
➤ http://css4selectors.parseapp.com/
➤ http://www.sitepoint.com/future-generation-css-selectors-
level-4/
➤ https://davidwalsh.name/css4-preview
➤ http://www.w3.org/TR/selectors4