Fundamentos de CSS: Selectores Parte II

Selectores CSS: Fundamentos

Seguimos conla nueva temática en el Blog, traduciendo al español interesantes articulos de una colega desarrolladora front-end freelance que se llama Maria Kovacs
Esta es la segunda parte sobre Selectores CSS.
Atributos

Antes de explorar los selectores atributos de CSS tenemos que entender que és un Atributo HTML y si ya viste algun documento HTML seguramente sabes como son. Los atributos (Attributes) nos permiten dar mas información sobre los elementos HTML, se muestran como pares nombre/valor. Algunos ejemplos son:

name=element name
target= _blank
lang= language
title= element title
alt= alternative information
href= provides an address information


Algunos atributos se muestran por defecto en forma de tooltip cuando hacemos hover sobre el elemento como el titulo (title) de dicho elemento. Otros como <img> contienen atributos ancho y altura pero no son mostrados al usuario de ninguna forma. Los estandares de HTML5 no requieren el uso de minusculas en nombre de atributos pero siempre es una buena practica. Otra cosa muy importante es recordar que estos atributos HTML proveen información a la pantalla del usuario y son una importante parte de la accesibilidad.

CSS nos permite manipular elementos HTML que tengan atributos específicos desde que se especifique !DOCTYPE. La estructura que usamos en CSS es un poco diferente a la de HTML. Veamos algunos:

a[target="_self"]{
background-color aqua;
}


Selector [attribute~=value] 

Muy similar al attribute/value, pero si prestamos atencion hay un tilde despues del "=". Esta estructura dice a CSS que seleccione el elemento con el valor que contiene una palabra específica, como el que sigue:

[title ~= "development"]{
text-decoration: underline;
}


Selector [attribute|=value] 

Este atributo usa una barra vertical (|) seguida del signo de igual (=). Esto nos dice a CSS que agarre el elemento con el atributo especificado iniciando con un valor específico. En el ejemplo seleccionamos un elemento con una clase que tiene un valor que inicia con "container". Atención a esto: EL valor tiene que tener toda la palabra como class="container" o class="container-main".[class|="container"]{
text-shadow: 2px 1px #000;
}




Selector [attribute^=value]

Aqui se pueden complicar un poco las cosas porque este atributo te permite hacer mas o menos lo mismo que con "attribute/value", pero en este caso no necesitas toda la palabra. Veamos:[class^="container"]{text-decoration: underline;}

Selector [attribute$=value]

Este atributo nos permite seleccionar elementos donde el valor TERMINA con un valor especifico y no necesita ser toda la palabra. En el ejemplo seleccionamos todos los elementos con una clase que termina con "borders", puede ser center-borders left-borders etc:



[class$="borders"] {background: aqua;}

Selector [attribute*=value]

Este atributo nos permite seleccionar elementos en los que el valor contenga un valor específico y no necesariamente toda la palabra. Veamos el ejemplo:



[class*="tip"] {background: aqua;}

Selector [attribute]

Aqui el atributo nos permite seleccionar un elemento HTML con un valor especifico, como el ejemplo:

a[target="_blank"] {background: aqua;}a[title="the tools"] {background: aqua;}a[alt="images"] {background: aqua;}

Por hoy es todo, atentos a la Parte 3:

Aqui les dejo el Pos Original en: CSS Fundamentals Part 9: Selectors

Para saber mas sobre HTML, CSS3 y Desarrollo móvil: Pablo M. Francisco




Fuente: este post proviene de Pablo M. Francisco, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado:
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Todos los pagos y compras online, todos los "Me gusta", comentarios, mensajes, twits, chats, todas las gestiones que hacemos por internet dejan un rastro que contiene nuestros datos personal ...

This my first post in english. Please try to understand any mystakes :). Today 80% of consumers are concerned about mobile marketing. Thousands of mobile phone users world wide were surveied on their ...

Etiquetas: general

Recomendamos

Relacionado

general css css3 ...

Selectores CSS: Fundamentos Hoy inicio una nueva temática en el Blog, traduciendo al español interesantes articulos de una colega desarrolladora front-end freelance que se llama Maria Kovacs. Les comparto un este post muy interesante y bien explicado sobre Selectores CSS:Fundamentos. Todos los creditos del post son de Maria Kovacs de quien les compartiré más información al final de esta traducci ...

general curso blogger desde cero

Si estás siguiendo de cerca el curso "Blogger desde cero", sabrás que la promesa de publicación para este sábado era profundizar en un tema referente al mundo del diseño de blogs. Ofrecerte una información útil de aproximación a los códigos inverosímiles que observamos -entre el estupor y el pánico- cuando nos proponemos modificar la plantilla de nuestro blog. Con este fin, tengo el abs ...

Blogging Tutoriales

Una de las cosa que más me gustan de Blogger, es la capacidad de insertar y personalizar un formulario de contacto, sin la necesidad de recurrir a servicios como JotForm o Foxyform. Sin duda, un gran acierto, pues muchos de estos servicios tienen una limitación en cuanto a la cantidad de mensajes que puedes recibir en tu correo. Añadirlo es bastante sencillo, pues esta función se trata de un gadg ...

css Ejercicio CSS Cajas CSS ...

Plantilla Web CSS, HTML y PHP. Las lecturas previas para desarrollar esta plantilla son las siguientes: Guía de CSS para Principiantes Ejemplo de Plantilla CSS (Ejemplo1) Ejemplo de Plantilla CSS (Ejemplo2) ¿Cómo Abrir una Página HTML Dentro de un DIV? Después de revisar los ejemplos, Se propone la práctica de CSS, HTML y PHP por medio del desarrollo de una plantilla web que

Después de mucho pedírmelo.... ¡¡¡el curso de html y css está aquí!! Siento haber tardado tanto en lanzarlo, pero preparar un curso de html no es como preparar un curso sobre promocionar un blog. Al fin y al cabo, todo aquello que os enseño en cómo promocionar o en otros de mis cursos, no deja de estar en vuestro idioma. El html es un lenguaje nuevo. Ya no vale copiar y pegar como hacíamos en los ...

Programacion css programacion ...

¿Creamos una página web con HTML y CSS y que sea chula?, que mole, que entres y digas… Dios es la página de las páginas. Cómo programar una web en html5 y css Pues ya vimos cómo podemos crear nuestra web con HTML5 y CSS, pero si es cierto que aunque bonita le falta ese punto de dinamismo, ese movimiento en la página que le haga estar viva. Crear un dinamismo con CSS Pues sí querido lector (c ...

html

Aprender HTML es algo que debemos tener en cuenta si queremos crear sitios web desde cero y profesionales, es por eso que hoy te traigo un curso gratis de HTML, CSS y BOOSTRAP desde cero para que puedas aprender todo lo necesario para empezar a crear tus propios sitios web para tus propios proyectos de estudio, trabajo, entre otros. Aprendizaje en el Curso de HTML, CSS y BOOTSTRAP Crear un sitio ...

Señoras y señores... ¡otro post que tenía preparado y para no echarlo a perder! Os lo contaba el lunes, y este os otro que tenía, pero ya no tengo más... :( Tenía uno de la técnica Pomodoro, pero no tengo ni dos párrafos, así que tendría que escribirlo de cero como quien dice jaja, y luego otro sobre 10 razones por las que aprender html y css, que si queréis, lo publico, decírmelo en los comentari ...

Redes sociales Uncategorized Apariencia ...

Botones de click to tweet para tu blog y como ponerlos en wordpress y blogspot. Tenemos que incitar a nuestros lectores a que compartan nuestro contenido en las redes sociales para darnos a conocer. Una manera es conseguir que compartan nuestros post en Twitter, la mejor manera de hacerlo es mediante los famosos “clic to Tweet”. Existen muchos plugins sociales para Twitter o Facebook   ...

Blogging

Si eres nuevo en Blogger, entonces te habrás topado con una herramienta para nada particular, la cual está presente en todo lugar donde exista un campo para escribir y un editor de texto. ¿Qué es un blockquote o texto citado? Ya sea un documento de Word o el mismo editor de entradas de Blogger o WordPress, el blockquote o cita es una herramienta que sirve para enmarcar o destacar cierta parte imp ...