Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] CSS para pestañas

Estas en el tema de CSS para pestañas en el foro de CSS en Foros del Web. Hola! Encontre este aporte: http://css-tricks.com/functional-css-tabs-revisited/ Necesito explicación sobre esta parte: CSS Código: [type=radio]:checked ~ label { background: white; border-bottom: 1px solid white; z-index: 2; } ...
  #1 (permalink)  
Antiguo 04/03/2012, 15:21
 
Fecha de Ingreso: octubre-2008
Mensajes: 66
Antigüedad: 13 años, 6 meses
Puntos: 1
Pregunta CSS para pestañas

Hola!

Encontre este aporte:

http://css-tricks.com/functional-css-tabs-revisited/


Necesito explicación sobre esta parte:

CSS
Código:
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}

Especificamente:
¿Que es eso de encerrar con corchetes en CSS, que estan haciendo esas viboritas en el aire y esos zindex?
  #2 (permalink)  
Antiguo 04/03/2012, 16:30
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 14 años, 11 meses
Puntos: 539
www.librosweb.es
  #3 (permalink)  
Antiguo 04/03/2012, 16:47
 
Fecha de Ingreso: octubre-2008
Mensajes: 66
Antigüedad: 13 años, 6 meses
Puntos: 1
Respuesta: CSS para pestañas

¿Que es eso de encerrar con "[ ]" en CSS (yo suelo utilizar "{ }"), que estan haciendo esas viboritas en el aire?
  #4 (permalink)  
Antiguo 04/03/2012, 18:16
Avatar de rampaign  
Fecha de Ingreso: febrero-2010
Ubicación: Lima, Peru, Peru
Mensajes: 12
Antigüedad: 12 años, 3 meses
Puntos: 3
Respuesta: CSS para pestañas

Cita:
Iniciado por Virtualforos Ver Mensaje
Hola!

Encontre este aporte:

http://css-tricks.com/functional-css-tabs-revisited/


Necesito explicación sobre esta parte:

CSS
Código:
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}

Especificamente:
¿Que es eso de encerrar con corchetes en CSS, que estan haciendo esas viboritas en el aire y esos zindex?
Los corchetes y las "viboritas" son selectores, tal como lo es el "#" para id's y el "." para clases, solo que estos selectores pertenecen a la especificacion CSS3.


Los corchetes se usan para seleccionar atributos, por ejemplo:

[type=radio] {}, con esto seleccionas todos los elementos que tengan el atributo "type" y que éste sea igual a "radio".


La "viborita" selecciona elementos con el mismo padre, y que respeten el orden del selector, es un selector de hermanos, por ejemplo:
[type=radio]:checked ~ label {}, selecciona todos los elementos "label" que sean hermanos de un elemento con "type" igual a "radio" seleccionado y que ademas, se cumpla que el label esta despues del radio button, lo particular de este selector es que los elementos no tienen que estar exactamente juntos, puede haber otro elemento entre ellos, y aun asi funcionaran.


En cuanto al aporte de las pestañas, cada una de las pestañas tiene la siguiente estructura html:

Código HTML:
<div class="tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">Tab Three</label>

       <div class="content">
           stuff
       </div>
   </div> 
El modo de reconocer qué pestaña ha sido seleccionada es precisamente por el radio button, que va a tener el atributo "checked", aqui entran los selectores:

Código:
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
Estos son los estilos para el label que sea hermano de un radio button seleccionado, este label es el texto de la "pestaña activa". El funcionamiento es simple: se aplica este estilo al label hermano del radio button seleccionado, con esto, se selecciona solo el label correspondiente a la pestaña actual.


Código:
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}
Este es el estilo para el contenido hermano del radio button seleccionado, al darle "z-index: 1" este contenido estara encima de todos los contenidos de las pestañas y por ello sera el que se vea. El funcionamiento es como el del label, se selecciona el contenido correspondiente al radio button seleccionado.

En resumen, el truco aquí al usar el selector de la forma "a ~ b" es que te permite utilizar los elementos correctos segun la pestaña seleccionada (radio button clickeado).

Espero que te haya servido de algo mi explicacion, te dejo un par de links sobre los selectores. Como informacion adicional, el selector de atributos "[]" tiene usos mas avanzados, como por ejemplo, seleccionar un atributo que en lugar de ser exactamente igual a algun valor, empiece con ese valor, o termine exactamente con ese valor:
E[foo^="bar"], elemento E, cuyo atributo "foo", empieza con el texto "bar"
E[foo$="bar"], elemento E, cuyo atributo "foo", termina con el texto "bar"

http://reference.sitepoint.com/css/generalsiblingselector
http://www.w3.org/TR/selectors/#general-sibling-combinators


Saludos
  #5 (permalink)  
Antiguo 04/03/2012, 18:30
 
Fecha de Ingreso: octubre-2008
Mensajes: 66
Antigüedad: 13 años, 6 meses
Puntos: 1
Respuesta: CSS para pestañas

Estoy emocionado, ademas de responder lo que preguntaba, explicaste como funciona el código. Rampaign, te dedico esto: http://dagobah.net/flash/thank_you.swf

Etiquetas: pestañas, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:35.