Seletores avançados, pseudo-classes e pseudo-elementos no CSS

Nessa talk serão abordados alguns seletores avançados, pseudo-classes e pseudo-elementos que podem ser muito úteis no seu CSS do dia-a-dia.

Transcript

1. css { seletores-avançados pseudo-classes pseudo-elementos } Jullia Saad
2. Quem sou eu 21 anos Desenvolvedora front-end - Codeminer Patinadora nas horas vagas @julliasaad julliasaad01@gmail.com @terrivellola
3. p { color: red; } selector property value declaration
4. Seletores https://codepen.io/julliasaad/pen/KRyLQR/
5. Seletores • Universal (*) • Atributo (a[foo]) • Filho (ul > li) • Irmão geral (p ~ li) • Irmão adjacente (p + li)
6. Seletor “*” - universal “A principal utilização do seletor universal é "zerar" essas propriedades para todos os elementos da marcação”
7. Seletor “a[foo]” - atributo “Casa com elementos que contenham um determinado atributo”
8. Seletor “a[foo]” - atributo • a[foo~="bar"] - pertence a uma lista de valores separados por espaço • a[foo^="bar"] - começa com string • a[foo$="bar"] - termina com string
9. Seletor “>” - filho “quero pegar todos elementos filhos deste elemento”
10. Seletor “~” - irmão geral “quero pegar todos elementos depois deste elemento”
11. Seletor “+” - irmão adjacente “quero pegar o elemento imediatamente após este elemento”
12. Pseudo-classes “são tipos de classes especiais que não são definidas pelo desenvolvedor (já são pré-definidas)”
13. https://codepen.io/julliasaad/pen/NMwVmM
14. Enésimo filho “:nth-child(n)” “casa com o elemento que é o enésimo filho do seu elemento pai”
15. Último filho “:last-child” “casa com o elemento que é o último filho do seu elemento pai”
16. Primeiro filho “:first-child” “casa com o elemento que é o primeiro filho do seu elemento pai”
17. Primeiro do mesmo tipo “:first-of-type” “casa com o elemento que é o primeiro irmão (filhos do mesmo elemento pai) do mesmo tipo”
18. Último do mesmo tipo “:last-of-type” “casa com o elemento que é o último irmão (filhos do mesmo elemento pai) do mesmo tipo”
19. :hover, :focus, :active “acontece de acordo com determinadas ações do usuário”
20. Pseudo-elementos “São como elementos virtuais que podem ser tratados como elementos regulares da marcação HTML. Contudo, eles não existem na árvore do documento (no DOM) pois são criados com uso de CSS”
21. https://codepen.io/julliasaad/pen/rvvMEM
22. ::first-letter “Casa com a primeira letra do texto formatado de um elemento”
23. ::before “Casa com o conteúdo gerado antes de um elemento”
24. ::after “Casa com o conteúdo gerado depois de um elemento”
25. Bibliografia • http://www.maujor.com/tutorial/guia-completo-seletores-css3.php • http://www.maujor.com/tutorial/guia-definitivo-das-pseudoclasses- e-pseudoelementos-css.php • https://www.caelum.com.br/apostila-html-css-javascript/css-avanca do/#exerccios-seletores-e-pseudo-classes
26. Obrigada!