O documento discute pseudo-classes, seletores e media queries em CSS. Pseudo-classes e pseudo-elementos são usados com seletores para definir regras mais específicas para elementos. Seletores mais específicos determinam quais propriedades CSS serão aplicadas. Media queries permitem estilizar conteúdo dependendo do tipo de mídia, como telas de diferentes tamanhos.

1. CSS - Pseudo-classes,
Seletores e Media-
queries
Willian Massami Watanabe
wwatanabe@utfpr.edu.br
1

2. Sumário
• pseudo-classes
• seletores
• media-queries
2

3. pseudo-classes
3

4. pseudo-classes
• Pseudo-classes
• Pseudo-classes e pseudo-elements são
utilizados junto com os seletores para
determinar regras mais específicas de
elementos
• Exemplos: hover, link, visited, active, first-child,
focus, first-line, first-letter, entre outros.
4

5. pseudo-classes
5

6. pseudo-classes
6

7. pseudo-classes
7

8. pseudo-classes
8

9. pseudo-classes
pseudo-elements
9

10. seletores
10

11. seletores
11

12. seletores
12

13. seletores
13

14. seletores
Menos
específico
14

15. seletores
15

16. seletores Menos
específico
16

17. seletores
• Efeito cascata do CSS
• as propriedades declaradas com os seletores
mais específicos prevalecem
• possibilidade de usar a chamada !important
para mudar esse comportamento, mas esse
tipo de atribuição não é recomendada
17

18. media-queries
18

19. media-queries
• Utilizadas para definir regras de CSS diferentes
para diferentes tipos de mídia
19

20. media-queries
http://tableless.com.br
20

21. media-queries
http://tableless.com.br
21

22. media-queries
22

23. media-queries
23

24. media-queries
24

25. media-queries
Menos
específico
25

26. Exercício
• Exercício seletores e pseudo-classes: faça um código
HTML e CSS que apresente o seguinte layout
26

27. Exercício
• Exercício seletores e pseudo-classes: faça um código
HTML e CSS que apresente o seguinte layout
27

28. Exercício
• Exercício seletores e pseudo-classes: faça um código
HTML e CSS que apresente o seguinte layout
• DICA: http://bryanhadaway.com/testing/simple-css-only-
dropdown-menu.html
28