etiqueta - title html español

Orientación de elementos anidados con CSS

Question

Digamos que tengo un marcado profundamente anidado que quiero apuntar con CSS. Podría ser cualquier cosa, pero por ejemplo:

<div>
    <div id=''someid''>
        <span class=''someclass''>
            <a class=''link'' href=''alink''>Go somewhere</a>
        </span>
    </div>
<div>

¿Es aceptable escribir una regla CSS que apunte a la etiqueta <a> directamente, de esta manera?

a.link { font-size: large; }

¿O es esto considerado no estándar que puede fallar en algunos navegadores? ¿Necesito apuntar a cada elemento en la cadena de esta manera?

div div span.someclass a.link { font-size: large; }

Answer 1

Ambos son completamente aceptables de usar y la respuesta depende de su solución específica. Por ejemplo, si tiene otras áreas en las que está compartiendo propiedades comunes que están definidas por esa clase, querría mantenerla lo más general posible. Si, por ejemplo, tiene una navegación y los enlaces en esa área comparten algunos elementos comunes, estos podrían definirse mediante un a.link

Luego, en tu html anidado, podrías hacer algo como

.someclass a.link {font-size:8px} para hacer ese texto más pequeño.

Aquí hay un artículo que explica cómo funciona la especificidad: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 2

Ambos son perfectamente válidos, y el que uses depende de lo que quieras hacer.

Si está creando una clase genérica que desea poder usar en todo su sitio, independientemente del elemento y de dónde se encuentre, solo debe usar .class . Un buen ejemplo de esto es algo como .icon que tal vez quiera usar en enlaces, elementos de lista, encabezados, etc. Y desea poder usarlos en cualquier lugar .

Si está creando una clase que es específica para / solo funciona en un determinado tipo de elemento, también es mejor usar el elemento en el selector. Un ejemplo de esto sería una lista con viñetas que desea mostrar en una línea, ya que esta clase requiere que el HTML sea un <ul> también debe especificarlo en el CSS; ul.inline . De esta manera, también puede utilizar el nombre de clase "en línea" para otros elementos, sin que el estilo afecte a ambos.

Si solo está utilizando la clase para seleccionar el elemento pero no debería tener ningún estilo genérico, debe ser específico. Por ejemplo, es posible que desee que el primer párrafo de su elemento #blog-post sea ​​más grande, luego debe especificar #blog-post y la clase; #blog-post p.first (tenga en cuenta que este tipo de clases ya no son necesarias gracias a los selectores avanzados como :first-of-type , h2 + p etc.).

Decir que " .link es lo mejor, a.link es el segundo mejor y un selector largo es malo" es simplemente incorrecto. Todo depende de la situación.

Answer 3

Cuanto más apuntado hagas tu CSS, menos flexible se volverá. Es tu propio intercambio. Si vas a dar a los enlaces una clase específica como esa, estoy bastante seguro de que serán visualmente iguales, ya sea que aparezcan dentro de este árbol o fuera de él, para que puedas seguir con tu primer ejemplo.

Answer 4

En realidad, se recomienda usar un a.link lugar de la segunda opción larga y fea, que puede causar problemas de especificidad y rendimiento.

Es incluso mejor si solo .link . Esa es la mejor opción.

Answer 5

a.link es la mejor manera de hacerlo. Si desea que un determinado a.link sea diferente del resto, deberá agregarle algo de peso.

a.link { ... } /* Global */
span.someclass a.link { ... } /* Finds all a.link within span.someclass */

Los selectores descendientes (línea 2) no son la forma más eficiente de agregar estilo a un elemento, así que utilícelos con moderación. Personalmente, los uso cuando necesito dar estilos especiales a una Clase Global dentro de una determinada ID / Clase.