Articles of css selectores

¿Qué hace un en CSS?

He usado CSS antes y me encontré con el siguiente estilo CSS, no tengo ni idea de lo que hace. a[href^=”http:”] { background: url(img/keys.gif) no-repeat right top; } a[href^=”http://mysite.com”], a[href^=”http://www.mysite.com”] { background-image: none; padding-right:0; }

El selector CSS no es sensible a los atributos

Si tengo un elemento HTML un selector CSS debe ser sensible a mayúsculas y minúsculas: input[value=’Search’] coincidencias input[value=’search’] no coincide Necesito una solución donde el enfoque insensible a las mayúsculas y minúsculas también funciona. Estoy usando Selenium 2 y Jquery , por lo que las respuestas para ambos son bienvenidas.

IE8: nth-child y: antes

Aquí está mi CSS: #nav-primary ul li:nth-child(1) a:after { } Funciona en todas partes ahora (lo usé en mi sitio web) excepto Internet Explorer 8 … ¿Hay posiblemente una forma de usar nth-child en IE8? Esta es la peor versión de este navegador … nada funciona como debería y no puedo encontrar la manera de […]

¿Por qué no funciona el selector h3: nth-child (1): contains (‘a’)?

Reviso este selector: h3:nth-child(1):contains(‘a’) selector no funciona? Compruebo esto en firefinder y no devuelve nada (no hay información de que hay cero elementos) Luego revisa esto: h3:nth-child(1) y devuelve h3, por lo que el selector es casi bueno, pero algo con este texto (h3 tiene texto ‘a’) sale mal.

¿Cómo puedo seleccionar un enésimo hijo sin conocer el elemento padre?

No puedo encontrar una manera de seleccionar el enésimo elemento, el último elemento o el primer elemento en los casos en que no conozco el elemento principal. nth-child existe, pero solo para niños, por ejemplo: One Two p:last-child selecciona el párrafo “Two”, y p:first-child selecciona el párrafo “One”. Pero, ¿qué pasa cuando tengo un código […]

: el selector not () no se comporta de la misma manera entre Safari y Chrome / Firefox

Me está costando trabajo descifrar por qué el siguiente código se muestra en azul en Safari, pero en rojo en Chrome y Firefox. em:not(div) { color: red } em:not(p div) { color: blue } FOO https://jsfiddle.net/hzcLpf9L/ Aparentemente parece que Chrome y Firefox no son compatibles con :not() selectores de CSS con múltiples niveles en ellos. […]

¿Debo usar notación de dos puntos simple o doble para los pseudo-elementos?

Dado que IE7 e IE8 no admiten la notación de dos puntos para los pseudoelementos (por ejemplo, ::after o ::first-letter ), y dado que los navegadores modernos admiten la notación de un solo punto (por ejemplo, :after ) para la compatibilidad con versiones anteriores, Uso solo la notación de un solo punto y cuando la […]

SASS: selecciona aleatoriamente la imagen de fondo de una lista

Necesito dar salida a esto: #footer-widgets .container .row { background-image: url(“RANDOMLY PICKED”); background-position: right bottom; background-repeat: no-repeat; } … y debería haber una lista con 4 o 5 enlaces a las imágenes de fondo reales ( http://sofes.miximages.com/css/image.png ) para elegir. ¿Cómo puedo hacer esto con SASS?

Reemplazo de imagen de Checkbox CSS puro

Tengo una lista de casillas en una mesa. (uno de varios CB en la fila)         Me gustaría reemplazar la imagen de la checkbox con un par de imágenes personalizadas de encendido / apagado y me preguntaba si alguien tenía una mejor comprensión de cómo hacer esto con CSS. Encontré este tutorial […]

Manejo de dos puntos en un ID de elemento en un selector de CSS

JSF está configurando el ID de un campo de entrada en search_form:expression . Necesito especificar un poco de estilo en ese elemento, pero ese punto se parece al comienzo de un pseudo-elemento para el navegador, por lo que se marca como no válido e ignorado. ¿Hay alguna forma de escapar del colon o algo así? […]