Diapositiva para la clase de Pseudoelementos y Pseudo Selectores en el curso de HTML/ CSS de Escuela.it

1. :
pseudo selectores / elementos

2. :
pseudo selectores / elementos

3. pseudo selectores / elementos
:link

4. pseudo selectores / elementos
a:link {...}

5. pseudo selectores / elementos
:visited
:link

6. pseudo selectores / elementos
a:visited {...}
:link

7. pseudo selectores / elementos
:hover
:link
:visited

8. pseudo selectores / elementos
a:hover {...}
:link
:visited

9. pseudo selectores / elementos
:active
:link
:visited
:hover

10. pseudo selectores / elementos
a:active {...}
:link
:visited
:hover

11. pseudo selectores / elementos
:active
:link
:visited
:hover{links

12. pseudo selectores / elementos
:active
:link
:visited
:hover{links
:

13. pseudo selectores / elementos
:active
:link
:visited
:hover{links
:focus

14. pseudo selectores / elementos
:active
:link
:visited
:hover{links
input:focus {...}

15. pseudo selectores / elementos
:active
:link
:visited
:hover{links
input[type="file"]:focus {...}

16. pseudo selectores / elementos
:active
:link
:visited
:hover{links
:focus

17. pseudo selectores / elementos
:active
:link
:visited
:hover{links
:target
:focus

18. pseudo selectores / elementos
:active
:link
:visited
:hover{links
.caja1:target {...}
:focus

19. pseudo selectores / elementos
:active
:link
:visited
:hover{links
:checked
:focus
:target

20. pseudo selectores / elementos
:active
:link
:visited
:hover{links
.checkbox:checked {...}
:focus
:target

21. pseudo selectores / elementos
:active
:link
:visited
:hover{links
:disable
:focus
:target
:checked

22. pseudo selectores / elementos
:active
:link
:visited
:hover{links
input:disable {...}
:focus
:target
:checked

23. pseudo selectores / elementos
:active
:link
:visited
:hover{links
:disable
:focus
:target
:checked{inputs

24. pseudo selectores / elementos
:active
:link
:visited
:hover{links
:disable
input:focus {...}
:target
:checked

25. pseudo selectores / elementos
:active
:link
:visited
:hover{links
:disable
a:focus {...}
:target
:checked

26. pseudo selectores / elementos
:active
:link
:visited
:hover{links
:disable
:focus
:target
:checked{inputs

27. pseudo selectores / elementos
:active
:link
:visited
:hover{links
:disable
:focus
:target
:checked{inputs

28. pseudo selectores / elementos
:active
:link
:visited
:hover{links
:disable
:focus
:target
:checked{inputs

29. pseudo selectores / elementos
:

30. pseudo selectores / elementos
:first-child

31. pseudo selectores / elementos
:nth-child(n)
:first-child
:last-child

32. pseudo selectores / elementos
:nth-child(2)
:first-child
:last-child

33. pseudo selectores / elementos
:nth-child(n+3)
:first-child
:last-child

34. pseudo selectores / elementos
:nth-child(-n+3)
:first-child
:last-child

35. pseudo selectores / elementos
:nth-child(3n+1)
:first-child
:last-child

36. pseudo selectores / elementos
:nth-child(3n+2)
:first-child
:last-child

37. pseudo selectores / elementos
:nth-child(3n+2)
:first-child
:last-child
:nth-type(n)

38. pseudo selectores / elementos
:nth-child(3n+2)
:first-child
:last-child
:nth-type(n)

39. pseudo selectores / elementos
:nth-child(3n+2)
:first-child
:last-child
:nth-type(2)

40. pseudo selectores / elementos

41. pseudo selectores / elementos

42. pseudo selectores / elementos
:

43. pseudo selectores / elementos
::

44. pseudo selectores / elementos
::

45. pseudo selectores / elementos
::after

46. pseudo selectores / elementos
::after

47. pseudo selectores / elementos
::after

48. pseudo selectores / elementos
::before
::after

49. pseudo selectores / elementos
::before
::after

50. pseudo selectores / elementos
<span>wakkos</span>
wakkos

51. pseudo selectores / elementos
::b ::a
<span>wakkos</span>
wakkos

52. pseudo selectores / elementos
::b ::a
span::before{
content=””;
}
<span>wakkos</span>
wakkos

53. pseudo selectores / elementos
::b ::a
span::before{
content=”-”;
}
<span>wakkos</span>
wakkos

54. pseudo selectores / elementos
::b ::a
span::before{
content=”-”;
}
-
<span>wakkos</span>
wakkos

55. pseudo selectores / elementos
::b ::a
span::before{
content=”+”;
}
+
<span>wakkos</span>
wakkos

56. pseudo selectores / elementos
::b ::a
span::before{
content=”hola”;
}
hola
<span>wakkos</span>
wakkos

57. pseudo selectores / elementos
::b ::a
span::before{
content=”hola”;
}
hola
span::after{
content=””;
width:10px;
height:10px;
display:inline-block;
background:red;
}
<span>wakkos</span>
wakkos

58. pseudo selectores / elementos
::b ::a
<span>wakkos</span>
span::before{
content=”hola”;
}
hola
span::after{
content=””;
width:10px;
height:10px;
display:inline-block;
background:red;
}
wakkos

59. pseudo selectores / elementos

60. pseudo selectores / elementos
Clase para escuela.it
thanks
Daniel / @Wakkos