Atributos del Selector

Clase 40 de 67 • Curso de HTML5 y CSS3 2015

Resumen

Material de la clase:
Repositorio del Curso
Descarga directa del Material

Enlaces recomendados:
https://github.com/Wakkos/CSS-Guidelines
https://developer.mozilla.org/es/docs/Web/HTML/Atributos
http://codepen.io/Wakkos/pen/xAhdq
https://github.com/daylerees/colour-schemes
http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Aleka Rodriguez

student•

Me estaba costando un poco entender de que hablaba y como no quería quedarme con la duda, investigue y detecte que en esta parte del vídeo, se refiere a 2 conceptos:

1. Los Attribute SelectorsPermiten crear reglas que se aplican a los "elementos" que tienen un "atributo" con un valor especifico.

Más info y ejemplos en:
* https://developer.mozilla.org/es/docs/Web/HTML/Atributos

2. Los Data AttributesPermiten almacenar información extra a la estándar y se pueden utilizar en lugar de las clases CSS para identificar elementos en una página.
Se pueden usar en lugar de las clases
Más info y ejemplos en:

* https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
* http://tatiyants.com/how-to-use-html5-data-attributes-with-jquery-and-selenium/

David Antonio Ordóñez Cornejo

student•

Gracias por hacer la precisión.
Saludos

Rabi Leonel Leon Chan

student•

Gracias por la aportacion!

Angel Gurrola Candia

student•

Muy bueno lo de los atributos, incluso librerías como Bootstrap los utilizan

Didier Zúñiga

student•

¿Cual es la diferencia entre colocar un data-attrib y una .class normalmente con sus respectivos atributos?

Daniel Hidalgo

student•

excelente clase!

Cesar David Ramírez Dimaté

student•

Código Fuente: Atributos del Selector
HTML

<ul>  
    <li data-RobotOwner="Koji Kabuto">Mazinger</li>  
    <li data-RobotOwner="Sayaka Yumi">Aphrodite</li>  
    <li data-RobotOwner="Nuke">Boss</li>  
</ul>

CSS

/* Selectores de Atributo (Ejem button checked) */  
li[data-RobotOwner="Koji Kabuto"] {  
    background-color: olive;  
    color: white;  
}  
  
li[data-RobotOwner="Sayaka Yumi"] {  
    background-color: brown;  
    color: white;  
}

José David Saborío

student•

atributo=>data-nombreAtributo: selector de atributo : li[nombreAtrib=" NOMBRE "] checkbox, si esta activado o no

Erick Orlando Velasco Martínez

student•

Bastante extraños esos ejemplos :-S

Jezabel Jakob

student•

No entendí lo de data [ ]

Andres Roa

student•

Los atributos data son creados en la especificación de HTML5 con la intención de que los desarrolladores los usemos para alojar datos (“data”) que son privados a la aplicación o al sitio web, para los cuales no existe ningún otro atributo apropiado.
¿Cómo se forma un atributo data?Es muy simple, un atributo data consta de un prefijo “data-” seguido del nombre que consideremos más apropiado para el valor que va a guardar, por ejemplo:1

De esta forma para lo que era una simple imagen, ahora incluímos más información (y podría agregar mucha más).

RAFAEL EDUARDO RABA MORENO Raba

student•

la verdad no entiendo lo de data. Para que funciona exactamente??

Jose Cayuqueo

student•

Es otra manera mas de dar estilos al HTML, así como existen los selectores de clases, selectores de ID, existen los selectores de atributos. Para lo cual usa la nomenclatura [data-nombreatributo]. De esa forma solo le dará estilo a quienes contengan ese atributo. Ojalá te haya quedado un poco mas claro.

Andres Roa

student•

<img id="miImagen" src="miImagen.jpg" alt="Texto alt"  
   data-camara="Modelo de la cámara que utilicé"  
   data-efecto="Efectos aplicados a esta foto"  
   data-geo="Longitud y latitud"  
   data-fecha="La fecha en que tomé la foto" />

De esta forma para lo que era una simple imagen, ahora incluímos más información (y podría agregar mucha más).

Atributos del Selector

Bienvenidos

Materiales

Descarga el código del proyecto

Introducción a HTML5 y CSS3

Preguntas antes de la clase

Diferencias entre Backend y Front-end

¿Qué es un Frontend?

¿Qué es HTML y CSS?

Semántica en HTML5

Metodología BEM

Introducción a CSS I

Introducción a CSS II

Developer Tools en navegador I

Developer Tools en navegador II

Preguntas Y Respuestas

Selectores CSS y flexbox

Preguntas antes de la clase

Flexbox

Imports en CSS

Retícula

Selectores en CSS y Pseudo selectores

Páginas internas

Preguntas y respuestas en clase

Listas Ordenadas, Float y Display

Preguntas antes de la clase

Listas ordenadas

Float y display

Preguntas y respuestas en clase

SASS y workflow profesional

Status HTTP

Counter Increment y pseudoSelectores

Textos y estilos con CSS3 Parte I

Textos y estilos con CSS3 Parte II

Animaciones con CSS

SASS

Preguntas y respuestas en clase

Contenido complementario

¿Por qué tu sitio web es tan lento?: Carga de navegadores

Preprocesadores CSS

Dibujando con CSS

Cómo acceder a la cámara de un dispositivo con la API de HTML5

Cómo crear filtros en CSS

Reticulas en CSS

Proyecto: Creando un App de Clima

HTML, CSS básico y uso de selectores

Estructura y etiquetas en HTML

Introducción a CSS

Selectores en CSS

Atributos del Selector

Selectores de Atributo

Sesión de preguntas y respuestas

Metodología BEM en HTML5 y CSS3

Float vs Display

Unidades de medida

Metodología BEM

Pseudo selectores

Sesión de preguntas y respuestas

CSS y workflow profesional

Progressive Enhancement

Fuentes y tipografías web

Responsive Media Queries

Imagenes Responsive y Retina

Preprocesadores CSS y SASS

Herramientas

Conceptos Básicos de JS y JQuery

Bases de desarrollo web moderno

Definición de JSON y API Rest

¿Qué es JSON?

DOM, BOM, JSON, AJAX

DOM: Document Object Model

Etiqueta Template en HTML5

Geolocation

Closures, Jquery y Local Storage en nuestra aplicación

Closures

Introduccion a GIT

Conectando con API Externa

Inyectando Datos en nuestro template

Añadiendo más ciudades a nuestra app

Guardando datos en LocalStorage