CSS - Selectors
Upcoming SlideShare
Loading in...5
×
 

CSS - Selectors

on

  • 6,077 views

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

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

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

Statistics

Views

Total Views
6,077
Views on SlideShare
6,046
Embed Views
31

Actions

Likes
3
Downloads
59
Comments
0

4 Embeds 31

http://www.slideshare.net 25
http://nomad.morinoko.com 4
http://blog.morinoko.com 1
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CSS - Selectors CSS - Selectors Presentation Transcript

  • CSS
    • Selectors
    Harold Maduro
  • Selectors
    • Universal Selector
    • Type Selector
    • Descendant Selector
    • Child Selector
    • Adjacent Sibling Selector
    • Class Selector
    • ID Selector
    • Otros
  • Universal selector
    • * { color: red; }
    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.
  • Universal selector
    • * { color: red; }
    <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.
  • Type selector
    • p { color: red; }
    Selecciona un elemento por su nombre en el documento. Cada instancia del elemento es seleccionada.
  • Type selector
    • li { color: red; }
    <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.
  • Descendant selector
    • body h2 { color: red; }
    • p strong { color: red; }
    • div ul li a { color: red; }
    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.
  • 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.
  • 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.
  • Child selector
    • div > p { color: red; }
    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
  • Child selector
    • <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> .
    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.
  • Adjacent sibling selector
    • h1 + p { margin-top: 0; }
    • h2 + p { color: red; }
    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
  • Adjacent sibling selector
    • <div>
    • <h1> Mi título </h1>
    • <p> Primer párrafo. </p>
    • <p>Segundo párrafo.</p>
    • <p>Tercer párrafo.</p>
    • </div> .
    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.
  • 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.
  • 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.
  • Class selector
    • .nota { color: red; }
    <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.
  • Class selector
    • p.nota { color: red; }
    Más específicos Sólo se le aplica a los párrafos (P) con el class de nota.
  • Class selector
    • p.nota { color: red; }
    <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.
  • Class selector
    • .nota { font-weight: bold; }
    • .alerta { color: red; }
    Podemos aplicarle varios classes a un mismo elemento <p class=”nota alerta”> ATENCION </p>
  • Class selector
    • .nota.alerta { color: red; }
    Podemos usar varias clases encadenadas <p class=”nota alerta”> ATENCION </p>
  • 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 (#).
  • ID selector
    • #header { color: red; }
    <div id=”header”> BOOT </div>
  • Otros selectors Simple Attribute Selector elemento[atributo] a[title] { color: green} Selecciona a todos los A que tienen el atributo title
  • 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;
  • 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;
  • 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.
  • Otros selectors :active :after :before :first-child :first-letter :first-line Pseudo Classes y Pseudo Elements :focus :hover :lang :link :visited
  • Pseudo Classes
    • a { color: blue; }
    • a:link { color: blue; }
    • a:visited { color: purple; }
    • a:hover { color: red; }
    • a:active { color: yellow; }
    Con links
  • Pseudo Classes
    • input { background-color: white;}
    • input:hover { background-color: gray;}
    • input:focus { background-color: yellow;}
    Con Forms
  • 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.
  • Grouping Selectors
    • h1, h2, h3, p { color: red; }
  • Grouping Selectors Se debe especificar cada selector complétamente #content p, ul { color: red; } Debe ser así: #content p, #content ul { color: red; }
  • 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; }
  • Bibliografía CSS: The Definitive Guide Amazon: http://tinyurl.com/5hs7jf Eric Meyer