soy Kseso y esto EsCSS

Diferencias entre :hover :focus :target :checked usados en tabs

Diferencias entre :hover :focus :target :checked usados en tabs

·Por Kseso ✎ 1

Unos ejemplos de tabs (pestañas) para comparar el distinto comportamiento entre :hover :focus :target :checked. Pincha y compara:

Tab 1 Tab 2 Tab 3
Tab 3

Por @Kseso en Twitter

Tab 2

KsesoCss en Blogger

:hover no tiene mayor secreto. Pasar el curso por él y aparece, pero de la misma manera también desaparece.

Hover Tabs

No es permanente

Tab 1 Tab 2 Tab 3
Tab 3

KsesoCss en Blogger

Tab 2

Por @Kseso en Twitter

:focus Actúa al seleccionar (click) al elemento. Pero pierde la permanencia con sólo pinchar en cualquier parte de la página

Focus Tabs

No permite una selección previa.

Tab 1 Tab 2 Tab 3
:target el más comúnmente usado para demostraciones de pestañas (tabs). Su defecto, que produce un salto al seleccionar. En este ejemplo se ha evitado
Tab 2

Por @Kseso en Twitter

Tab 3

KsesoCss en Blogger

Target Tabs

Un elemento seleccionado por defecto

:cheked está libre de todos los males del resto, es una gozada trabajar con él. Pero tiene una pega: sólo trabaja con inputs.
Tab 2

Por @Kseso en Twitter

Tab 3

KsesoCss en Blogger

Checked Tabs

Permite seleccionar cualquier tab.


Y los códigos...

Sólo tienes que mirar el código fuente de este artículo, ahí los tienes, el html y el css. El css está al final del artículo, encerrado en su etiqueta <style />

Créditos y atribuciones

Las tabs me las encontré dando un paseo por csscience.com

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso