Curso de Estándares Web - Día #3 Distintos tipos de selectors para aplicarle estilos a un elemento HTML específico.

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. 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.

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. 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.

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 (#).

23. Otros selectors Simple Attribute Selector elemento[atributo] a[title] { color: green} Selecciona a todos los A que tienen el atributo title

24. Otros selectors Exact Attribute Selector elemento[atributo="valor"] a[title="Casa"] Selecciona a todos los A que tienen el atributo title y que sea igual a "casa"

25. Otros selectors Partial Attribute Selector elemento[atributo="valor"] a[title~="Casa"] Selecciona a todos los A que tienen el atributo title y que dentro de su valor tengan "casa"

26. Otros selectors Language Attribute Selector elemento[lang|="es"] html[lang|="es"] Selecciona al elemento HTML cuyo lenguaje sea "es" o Español.

27. Otros selectors :active :after :before :first-child :first-letter :first-line Pseudo Classes y Pseudo Elements :focus :hover :lang :link :visited

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.

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. 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. Bibliografía CSS: The Definitive Guide Amazon: http://tinyurl.com/5hs7jf Eric Meyer