¿Puede encontrar archivos CSS para que solo se apliquen a los descendientes de un elemento determinado?

Question

Dado un archivo css, hay una forma de delimitar todo el archivo para que solo se aplique a elementos dentro de un elemento dado:

p. da:

<div id="container"> 
    <span class="some_element"/> 
    <!-- etc --> 
</div> 

¿Hay una manera de alcance todo un archivo CSS para aplicar a todos los elementos dentro de "contenedor" sin anteponiendo #container a todas las cláusulas css sola?

Answer 1

Me temo que no. Algunos preprocesadores de CSS le permiten escribir código que logra lo mismo.

E.g. LESS implementa reglas anidadas:

/* This LESS code... */ 

#header { 
    h1 { 
    font-size: 26px; 
    font-weight: bold; 
    } 
    p { font-size: 12px; 
    a { text-decoration: none; 
     &:hover { border-width: 1px } 
    } 
    } 
} 

/* ...produces this CSS */ 

#header h1 { 
    font-size: 26px; 
    font-weight: bold; 
} 
#header p { 
    font-size: 12px; 
} 
#header p a { 
    text-decoration: none; 
} 
#header p a:hover { 
    border-width: 1px; 
} 

Y Andy mencionado SASS, que hace lo mismo.

Answer 2

No solo con CSS, pero puede usar Sass, que se compiló en CSS.

Answer 3

Puede cargar la página con php y lanzar la etiqueta que desee de forma dinámica, o hacer lo mismo con javascript/jQuery ... aunque es bastante torpe. No hay un método incorporado para hacer esto ya que CSS siempre se aplica a toda la página.

Answer 4

Puede usar el atributo scoped en un elemento <style>, aunque hay poco o ningún soporte de navegador para él. En su ejemplo:

<div id="container"> 
    <style scoped>.some_element{}</style> 
    <span class="some_element"></span> 
</div> 

Aquí hay una Polyfill jQuery: http://thingsinjars.com/post/360/scoped-style/

Answer 5

Hay 2 maneras en que podría acercarse a este:

1) en HTML 5, (no se admite ampliamente todavía) no ha de ser una scoped atributo puede poner en una etiqueta <style>. Here es un breve artículo sobre el tema.

2) Puede usar un lenguaje de hoja de estilos dinámico (como LESS o SASS) que le permita anidar las reglas CSS relacionadas entre sí.

Answer 6

Puede usar la notación de nombres BEM - http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ ("bloque, elemento, modificador").

Su ejemplo se convertiría en:

<div id="container"> 
    <span class="container__some_element"/> 
    <!-- etc --> 
</div> 

Sí, si no utilizar una abreviatura, que está escribiendo el mismo número de caracteres en su CSS ... pero sus estilos tendrá menos specificity - - que puede ser beneficioso

¡Esperamos que el soporte del navegador para <style scoped> mejore en los próximos años!