Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Pseudo Elementos y Pseudo Clases en CSS

Pseudo Elementos y Pseudo Clases en CSS

Presentación del curso sobre Pseudo elementos y Pseudo Clases en CSS

6d22f37140f6460f5b806d2148d33085?s=128

SiloCreativo

June 24, 2015
Tweet

More Decks by SiloCreativo

Other Decks in Design

Transcript

  1. PSEUDO ELEMENTOS PSEUDO SELECTORES CSS3

  2. ¿Cuáles son? ¿Para qué sirven? TEORÍA > SELECTORES 1

  3. selector:pseudo-clase { propiedad:valor; } selector::pseudo-elemento { propiedad:valor; } TEORÍA

  4. “Para dar estilo a un estado especial de un elemento

    o seleccionar un elemento concreto de un conjunto.” a:hover { … } a:first-child { … } PSEUDO CLASES
  5. :hover { … } PSEUDO CLASES OK OK

  6. a:hover { … } a:visited { … } a:active {

    … } a:link { … } PSEUDO CLASES
  7. EJEMPLO!

  8. :focus { … } :checked { … } :disable {

    … } PSEUDO CLASES
  9. input:focus { … } input[type="checkbox"]:checked { … } input:disable {

    … } PSEUDO CLASES
  10. EJEMPLO!

  11. :first-child { … } PSEUDO CLASES

  12. :last-child { … } PSEUDO CLASES

  13. :nth-child { … } PSEUDO CLASES

  14. :nth-child(even) { … } PSEUDO CLASES

  15. :nth-child(an+b) { … } PSEUDO CLASES

  16. :nth-child(3n+1) { … } PSEUDO CLASES

  17. :nth-of-type() { … } PSEUDO CLASES

  18. EJEMPLO!

  19. ¿Cuáles son? ¿Para qué sirven? TEORÍA > ELEMENTOS 2

  20. “Para dar estilo a una parte específica de un elemento”

    a::after { … } p::first-letter { … } PSEUDO ELEMENTOS
  21. : vs :: :pseudo-clase { … } :pseudo-elemento { …

    } COMPATIBILIDAD CSS1 y 2
  22. : vs :: :pseudo-clase { … } ::pseudo-elemento { …

    } COMPATIBILIDAD CSS3
  23. a::before { … } PSEUDO ELEMENTOS

  24. a::after { … } PSEUDO ELEMENTOS

  25. a::before, a::after { … } PSEUDO ELEMENTOS

  26. ¿Para qué lo puedo usar? EN PRÁCTICA 3

  27. a::after { … } BOTONES CON ESTILO

  28. i::before { … } FontAwesome Littlebox WEBFONTS

  29. span::before { … } span::after { … } The Shapes

    of CSS CSS SHAPES
  30. p::first-letter { … } p::first-line { … } Rorem ipsum

    dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore CAPITAL LETTERs
  31. Master en CSS3 AVANZADO 4

  32. a:nth-of-type(2n+3)::after { … } a:nth-of-type(even):hover { … } ORDEN LÓGICO

  33. FIX FLOATS Float Left Float Left Parent Element “Collapsed”

  34. element::after { visibility: hidden; display: block; font-size: 0; content: "

    "; clear: both; height: 0; } FIX FLOATS
  35. FIX FLOATS Float Left Float Left Parent Element

  36. ::selection { … } consectetur adipiscing elit, sed do eiusmod

    tempor incididunt ut labore ::selection
  37. dialog::backdrop { … } ::backdrop OK

  38. dudas: ricardo@silocreativo.com GRACIAS! silocreativo.com @silocreativo escuela.it @EscuelaIT