Comunidad de diseño web y desarrollo en internet online

Selectores de contexto

Citar            
MensajeEscrito el 06 Dic 2011 07:38 pm
KONICHIWA, soy nueva en el foro, tengo una duda con respecto a selectores de contexto y agrupamiento de los mismos, leyendo varias fuentes, encontre que los selectores de contexto son cadenas formadas por dos o más selectores simples, separados por un espacio en blanco.

ejemplo

h1 h2 h3 h4 h5 h6{
font-family:Arial,Verdana;
}

Agrupamiento de selectores
Usados para la disminución repetitiva de declaraciones dentro de selectores, tambien usado para la agrupación de cadenas de selectores para poder afectar a más elementos usando menos lienas, para ello el uso de comas.

ejemplo

#box, .box, ul li a, #box:hover, input[type ="text"]{
color:red;
}

Mi duda es la siguiente, ¿Es lo mismo el agrupamiento de selectores que selectores de contexto?, espero me puedan ayudar con mi duda.

Por ary_

6 de clabLevel



Genero:Femenino  

firefox
Citar            
MensajeEscrito el 12 Dic 2011 05:12 am
La verdad nunca he sabido mucho de definiciones pero te puedo decir lo siguiente.

Código :

h1 a {
   color: red;
}

Afecta a etiquetas así: <h1><a href="#">ary_</a></h1>
No afecta a etiquetas así: <h1>Ary_</h1><a href="#">kinduff</a>

Código :

h1, h2 {
   color: red;
}

Afecta a etiquetas así: <h1>ary_</h1> y <h2>kinduff</h2>.

En resumen, porque a lo mejor no soy bueno con los ejemplos, en CSS cuando separas con una coma afecta a elementos múltiples (segundo ejemplo). Pero si separas con un espacio, únicamente afectará a elementos que sigan esa "ruta" (primer ejemplo).

Espero haya sido claro, siente la libertad de preguntar de nuevo o de pedir aclaración.

Suerte.

Por Kinduff

Claber

3563 de clabLevel

21 tutoriales
3 articulos

 

web dev wizzard

chrome
Citar            
MensajeEscrito el 13 Dic 2011 03:33 am
No, no es lo mismo.

Aca dice que el h6 que se encuentre dentro de cualquier h5, que a su vez este se encuentre dentro de cualquier h4 y así hasta h1, tendra fuente Arial. Solamente el h6.

h1 h2 h3 h4 h5 h6{
font-family:Arial,Verdana;
}

En cambio de esta forma afecta todos las h.. (La coma indica otro selector)

h1, h2, h3, h4, h5, h6{
font-family:Arial,Verdana;
}

Por juanofranco

25 de clabLevel



Genero:Masculino  

safari
Citar            
MensajeEscrito el 14 Dic 2011 10:27 am
Muchas gracias "kinduff" y "juanofranco", leyendo un poco más sobre el tema, encontre que a ese selector que yo llamaba de contexto, bueno, así lo encontre yo en otro manual, en otros libros, los autores lo llaman selector descendiente, como menciona kinduff, cuando son separados por espacios, la regla css afecta unicamente al elemento que se encuentre directamente dentro de otro u otros elementos, volviendo al ejemplos de las h.

h1 h2{
font-sezi: 12em;
font-color: #ffffff;
font-familiy: Verdana;
}

<body>
<h1>
<h2>
Esto es un emjemplo de selector descendiente
</h2>
</h1>
</body>

Y como comenta juanofranco, cuando varios selectores son separados por coma, indica que esta regla aplicara a más de un selector, como mencionas, la coma indica que es otro selector.

Volviendo nuevamente con el ejemplo de las h:

h1, h2{
font-sezi: 12em;
font-color: #ffffff;
font-familiy: Verdana;
}

<body>
<h1>
Esto es un ejemplo
</h1>
<h2>
Esto es otro ejemplo
</h2>
</body>

Muchas gracias chicos por el apoyo, regresando con el ejemplo anterior, entonces, ¿selector de contexto y selector descendiente es lo mismo?...
Creo que al parecer lo es.

:D

Por ary_

6 de clabLevel



Genero:Femenino  

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.