CSS <ul><li>Selectors </li></ul>Harold Maduro
Selectors <ul><li>Universal Selector </li></ul><ul><li>Type Selector </li></ul><ul><li>Descendant Selector </li></ul><ul><...
Universal selector <ul><li>* { color: red; } </li></ul>Selecciona todos los elementos en el documento.  Si no existe una r...
Universal selector <ul><li>* { color: red; } </li></ul><div>  <p> Soy un párrafo... </p> <ul>  <li> Soda </li> <li> Jugo <...
Type selector <ul><li>p { color: red; } </li></ul>Selecciona un elemento por su nombre en el documento.  Cada instancia de...
Type selector <ul><li>li { color: red; } </li></ul><div>  <p>Soy un párrafo...</p> <ul>  <li> Soda </li> <li> Jugo </li> <...
Descendant selector <ul><li>body h2 { color: red; } </li></ul><ul><li>p strong { color: red; } </li></ul><ul><li>div ul li...
Descendant selector La mayor parte del verdadero poder del CSS viene de la capacidad de seleccionar elementos utilizando s...
Descendant selector Tomen en cuenta que los elementos hijos o descendientes van a heredar las propiedades o reglas que les...
Child selector <ul><li>div > p { color: red; } </li></ul>Esto permite seleccionar a un elemento que es un hijo (o descendi...
Child selector <ul><li><div>  </li></ul><ul><li><p> Soy un párrafo... </p> </li></ul><ul><li><ul>  </li></ul><ul><li><li>S...
Adjacent sibling selector <ul><li>h1 + p { margin-top: 0; } </li></ul><ul><li>h2 + p { color: red; } </li></ul>Este nos pe...
Adjacent sibling selector <ul><li><div>  </li></ul><ul><li><h1> Mi título </h1> </li></ul><ul><li><p> Primer párrafo. </p>...
Class selector A pesar de que podemos utilizar los type selectors para seleccionar TODAS las instancias de un elemento en ...
Class selector Se pueden utilizar clases, las cuales son creadas por nosotros; para seleccionar ciertos elementos en la pá...
Class selector <ul><li>.nota { color: red; } </li></ul><div>  <h2 class=”nota”> Título </h2> <p class=”nota”> El párrafo. ...
Class selector <ul><li>p.nota { color: red; } </li></ul>Más específicos Sólo se le aplica a los párrafos (P) con el class ...
Class selector <ul><li>p.nota { color: red; } </li></ul><div>  <h2 class=”nota”>Título</h2> <p class=”nota”> El párrafo. <...
Class selector <ul><li>.nota { font-weight: bold; } </li></ul><ul><li>.alerta { color: red; } </li></ul>Podemos aplicarle ...
Class selector <ul><li>.nota.alerta { color: red; } </li></ul>Podemos usar varias clases encadenadas <p class=”nota alerta...
ID selector Los IDs funcionan de manera muy parecida a las clases, con la diferencia que un ID se pueden aplicar sólo una ...
ID selector <ul><li>#header { color: red; } </li></ul><div id=”header”>  BOOT  </div>
Otros selectors Simple Attribute Selector   elemento[atributo]  a[title] { color: green}  Selecciona a todos los A que tie...
Otros selectors Exact Attribute Selector   elemento[atributo=&quot;valor&quot;]  a[title=&quot;Casa&quot;]  Selecciona a t...
Otros selectors Partial Attribute Selector   elemento[atributo=&quot;valor&quot;]  a[title~=&quot;Casa&quot;]  Selecciona ...
Otros selectors Language Attribute Selector   elemento[lang|=&quot;es&quot;]  html[lang|=&quot;es&quot;]  Selecciona al el...
Otros selectors :active :after :before :first-child :first-letter :first-line Pseudo Classes y Pseudo Elements  :focus :ho...
Pseudo Classes <ul><li>a { color: blue; } </li></ul><ul><li>a:link { color: blue; } </li></ul><ul><li>a:visited { color: p...
Pseudo Classes <ul><li>input { background-color: white;} </li></ul><ul><li>input:hover { background-color: gray;} </li></u...
Grouping Selectors Cuando varios elementos en el HTML van a compartir las mimas declaraciones (color, tipografía, márgenes...
Grouping Selectors <ul><li>h1, h2, h3, p { color: red; } </li></ul>
Grouping Selectors Se debe especificar cada selector complétamente #content p, ul { color: red; } Debe ser así: #content p...
Grouping Selectors No se debe terminar el grupo con una coma. Esto es un error que causa al browser ignorar la regla en su...
Bibliografía CSS: The Definitive Guide Amazon:  http://tinyurl.com/5hs7jf Eric Meyer
Upcoming SlideShare
Loading in …5
×

CSS - Selectors

3,810 views
3,694 views

Published on

Curso de Estándares Web - Día #3

Distintos tipos de selectors para aplicarle estilos a un elemento HTML específico.

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,810
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
64
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

CSS - Selectors

  1. 1. CSS <ul><li>Selectors </li></ul>Harold Maduro
  2. 2. Selectors <ul><li>Universal Selector </li></ul><ul><li>Type Selector </li></ul><ul><li>Descendant Selector </li></ul><ul><li>Child Selector </li></ul><ul><li>Adjacent Sibling Selector </li></ul><ul><li>Class Selector </li></ul><ul><li>ID Selector </li></ul><ul><li>Otros </li></ul>
  3. 3. Universal selector <ul><li>* { color: red; } </li></ul>Selecciona todos los elementos en el documento. Si no existe una regla establecida para un elemento en específico; entonces se le aplica la regla del Universal Selector.
  4. 4. Universal selector <ul><li>* { color: red; } </li></ul><div> <p> Soy un párrafo... </p> <ul> <li> Soda </li> <li> Jugo </li> <p> Soy otro párrafo </p> </ul> <p> Último párrafo. </p> </div> . Selecciona a todos los elementos del documento y le aplica el color rojo. No importa qué elemento sea.
  5. 5. Type selector <ul><li>p { color: red; } </li></ul>Selecciona un elemento por su nombre en el documento. Cada instancia del elemento es seleccionada.
  6. 6. Type selector <ul><li>li { color: red; } </li></ul><div> <p>Soy un párrafo...</p> <ul> <li> Soda </li> <li> Jugo </li> <p>Soy otro párrafo</p> </ul> <p>Último párrafo.</p> <li> Un ejemplo fuera de UL </li> </div> . Sólo selecciona a todos los LI que se encuentren en el documento para aplicarle la regla.
  7. 7. Descendant selector <ul><li>body h2 { color: red; } </li></ul><ul><li>p strong { color: red; } </li></ul><ul><li>div ul li a { color: red; } </li></ul>Permite seleccionar a un elemento basado en su estatus como un descendiente de otro elemento. El elemento seleccionado puede ser un hijo, nieto o tatara - nieto (etc....) de su ancestro.
  8. 8. Descendant selector La mayor parte del verdadero poder del CSS viene de la capacidad de seleccionar elementos utilizando sus relaciones de padre - hijo (parent - child) o ancestro - descendiente (ancestor - descendant). Basándonos en la jerarquía de los elementos, cualquier elemento dentro del documento puede ser padre o hijo de otro elemento.
  9. 9. Descendant selector Tomen en cuenta que los elementos hijos o descendientes van a heredar las propiedades o reglas que les apliquemos a sus ancestros. body { font-family: verdana; } Todos los elementos dentro de body, no importa que estén dentro de otros elementos, van a heredar el tipo de letra Verdana.
  10. 10. Child selector <ul><li>div > p { color: red; } </li></ul>Esto permite seleccionar a un elemento que es un hijo (o descendiente directo) de otro elemento. Es más restrictivo que el Descendant Selector, ya que sólo escoge a los hijos. * IE 6.0 ignora este selector
  11. 11. Child selector <ul><li><div> </li></ul><ul><li><p> Soy un párrafo... </p> </li></ul><ul><li><ul> </li></ul><ul><li><li>Soda</li> </li></ul><ul><li><li>Jugo</li> </li></ul><ul><li><p>Soy otro párrafo</p> </li></ul><ul><li></ul> </li></ul><ul><li><p> Último párrafo. </p> </li></ul><ul><li></div> . </li></ul>div > p { color: red; } Esta regla sólo seleccionaría a los párrafos (P) que son exactamente hijos directos del DIV. El párrafo que está dentro del UL es un nieto o descendiente del DIV, por lo que no será seleccionado.
  12. 12. Adjacent sibling selector <ul><li>h1 + p { margin-top: 0; } </li></ul><ul><li>h2 + p { color: red; } </li></ul>Este nos permite escoger al siguiente hermano de un elemento; o mejor dicho, podemos escoger al elemento que sigue inmediatamente después de otro elemento y comparten el mismo padre. * IE 6.0 ignora este selector
  13. 13. Adjacent sibling selector <ul><li><div> </li></ul><ul><li><h1> Mi título </h1> </li></ul><ul><li><p> Primer párrafo. </p> </li></ul><ul><li><p>Segundo párrafo.</p> </li></ul><ul><li><p>Tercer párrafo.</p> </li></ul><ul><li></div> . </li></ul>h1 + p { color: red; } Esta regla sólo seleccionaría al párrafo que viene exactamente después de un H1. Ignorará a los otros párrafos ya que no vienen exactamente después del H1.
  14. 14. Class selector A pesar de que podemos utilizar los type selectors para seleccionar TODAS las instancias de un elemento en la página; con el class selector podemos seleccionar cualquier elemento en el HTML que contenga una clase específica; independientemente de su posición en la estructura del documento.
  15. 15. Class selector Se pueden utilizar clases, las cuales son creadas por nosotros; para seleccionar ciertos elementos en la página. El nombre de la clase, debe estar precedido por un punto (.). El beneficio de las clases es que se le pueden aplicar a varios elementos en una página, independientemente del tipo de elemento.
  16. 16. Class selector <ul><li>.nota { color: red; } </li></ul><div> <h2 class=”nota”> Título </h2> <p class=”nota”> El párrafo. </p> <ul> <li class=”nota”> Soda </li> <li>Jugo</li> <p>Soy otro párrafo</p> </ul> <p>Último párrafo.</p> </div> . Selecciona a todos los elementos que tengan el class de nota. No importa que tipo de elemento sea; ni en qué nivel de la jerarquía se encuentre.
  17. 17. Class selector <ul><li>p.nota { color: red; } </li></ul>Más específicos Sólo se le aplica a los párrafos (P) con el class de nota.
  18. 18. Class selector <ul><li>p.nota { color: red; } </li></ul><div> <h2 class=”nota”>Título</h2> <p class=”nota”> El párrafo. </p> <ul> <li class=”nota”>Soda</li> <li>Jugo</li> <p>Soy otro párrafo</p> </ul> <p>Último párrafo.</p> </div> . Sólo se le aplica a los párrafos que tengan el class de nota. Si hay otros elementos que también tienen class de nota; pero no son párrafos (P), no se le aplica la regla.
  19. 19. Class selector <ul><li>.nota { font-weight: bold; } </li></ul><ul><li>.alerta { color: red; } </li></ul>Podemos aplicarle varios classes a un mismo elemento <p class=”nota alerta”> ATENCION </p>
  20. 20. Class selector <ul><li>.nota.alerta { color: red; } </li></ul>Podemos usar varias clases encadenadas <p class=”nota alerta”> ATENCION </p>
  21. 21. ID selector Los IDs funcionan de manera muy parecida a las clases, con la diferencia que un ID se pueden aplicar sólo una vez en nuestro documento. Sólo puede haber un elemento en toda la página con el nombre de ID que especifiquemos, de la misma manera que sólo puede haber una persona en todo el país con su número de cédula. El nombre del ID va precedido por un símbolo numeral (#).
  22. 22. ID selector <ul><li>#header { color: red; } </li></ul><div id=”header”> BOOT </div>
  23. 23. Otros selectors Simple Attribute Selector elemento[atributo] a[title] { color: green} Selecciona a todos los A que tienen el atributo title
  24. 24. Otros selectors Exact Attribute Selector elemento[atributo=&quot;valor&quot;] a[title=&quot;Casa&quot;] Selecciona a todos los A que tienen el atributo title y que sea igual a &quot;casa&quot;
  25. 25. Otros selectors Partial Attribute Selector elemento[atributo=&quot;valor&quot;] a[title~=&quot;Casa&quot;] Selecciona a todos los A que tienen el atributo title y que dentro de su valor tengan &quot;casa&quot;
  26. 26. Otros selectors Language Attribute Selector elemento[lang|=&quot;es&quot;] html[lang|=&quot;es&quot;] Selecciona al elemento HTML cuyo lenguaje sea &quot;es&quot; o Español.
  27. 27. Otros selectors :active :after :before :first-child :first-letter :first-line Pseudo Classes y Pseudo Elements :focus :hover :lang :link :visited
  28. 28. Pseudo Classes <ul><li>a { color: blue; } </li></ul><ul><li>a:link { color: blue; } </li></ul><ul><li>a:visited { color: purple; } </li></ul><ul><li>a:hover { color: red; } </li></ul><ul><li>a:active { color: yellow; } </li></ul>Con links
  29. 29. Pseudo Classes <ul><li>input { background-color: white;} </li></ul><ul><li>input:hover { background-color: gray;} </li></ul><ul><li>input:focus { background-color: yellow;} </li></ul>Con Forms
  30. 30. Grouping Selectors Cuando varios elementos en el HTML van a compartir las mimas declaraciones (color, tipografía, márgenes, etc), se puede utilizar más de un selector para aplicarles a todo la misma declaración.
  31. 31. Grouping Selectors <ul><li>h1, h2, h3, p { color: red; } </li></ul>
  32. 32. Grouping Selectors Se debe especificar cada selector complétamente #content p, ul { color: red; } Debe ser así: #content p, #content ul { color: red; }
  33. 33. Grouping Selectors No se debe terminar el grupo con una coma. Esto es un error que causa al browser ignorar la regla en su totalidad. h1, p, ul, { color: red; } Debe ser así: h1, p, ul { color: red; }
  34. 34. Bibliografía CSS: The Definitive Guide Amazon: http://tinyurl.com/5hs7jf Eric Meyer

×