Aprender CSS es un momento emocionante: es cuando comienza a ver cómo sus páginas se transforman de paredes de texto sin formato a un sitio web elegante y atractivo como los que vemos todos los días. Sin embargo, si no le presta atención, su código puede estar un poco desordenado.
Como es habitual en informática, hay muchas formas diferentes de lograr lo mismo en CSS, y algunas son más eficientes que otras. Dependiendo de su enfoque, puede terminar con un código front-end limpio o desordenado.
Por ejemplo, suponga que desea diseñar todos los párrafos de una página
Esto funciona muy bien, pero hay una opción más eficiente: anidar reglas CSS en objetivos dentro de elementos. Puedes hacer esto con una función CSS llamada «combinator». Saber qué son los combinadores de CSS y cómo se pueden usar ayuda a que el código sea un poco más limpio y fácil de entender, así que comencemos ahora mismo.
¿Qué son los combinadores CSS?
En CSS, un combinador es un símbolo que vincula dos selectores de CSS para diseñar elementos de cierta manera. Los combinadores nos permiten aplicar reglas de estilo a los elementos en función de sus elementos principales o hermanos.
Tipos de combinadores CSS
CSS3 incluye cuatro tipos de combinadores: un combinador secundario, un combinador subordinado, un combinador hermano adyacente y un combinador hermano general. Echemos un vistazo a cada uno de ellos.
Combinador de descendientes
Un combinador descendiente se escribe como dos selectores separados por un solo espacio y se aplica a todas las instancias del segundo selector que se derivan (es decir, están anidadas dentro) del primer selector.
Por ejemplo, combinador descendiente # mi-div p aplica reglas relacionadas a todos
elementos dentro del div # mi-div – mira abajo.
ver la pluma Anidamiento de CSS: combinador de niños 1 de Christina Perricone (@hubspot) en CódigoPen.
Un combinador secundario funciona bien cuando desea diseñar todas las apariciones de un elemento en una sección específica de la página. Volviendo a nuestra situación en la introducción, es posible que desee diseñar todo
elementos dentro del tuyo
en la página de una manera diferente. En ese caso, puedes usar un combinador descendiente p principal.
ver la pluma Anidamiento de CSS: Combinador de niños 2 de Christina Perricone (@hubspot) en CódigoPen.
Es importante destacar que el combinador secundario selecciona cada instancia de un elemento anidado dentro de otro, incluidos los elementos secundarios, los elementos secundarios de esos elementos secundarios, etc.
Sin embargo, es posible que no siempre desee aplicar el estilo con tanta profundidad: aquí es donde entra en juego el combinador para niños.
combinador de niños
Un subcombinador se escribe como un símbolo mayoritario (>) intercalado entre dos selectores CSS. Afecta a todas las instancias de un elemento que son descendientes directos o secundarios de otro elemento. La cascada de estilo se detiene después del primer nivel de anidamiento.
En el siguiente ejemplo, utilicé un combinador secundario para colorear todo el texto del párrafo dentro
en el interior
ver la pluma CSS Nesting: Subcombinador de Christina Perricone (@hubspot) en CódigoPen.
Combinador de vecinos
Un combinador hermano adyacente se escribe como un signo más (+) entre dos selectores de CSS. Apunta a un elemento que coincide con el segundo selector solo si sigue inmediatamente a un elemento que coincide con el primer selector. Además, ambos elementos deben ser elementos secundarios del mismo elemento principal (y, por lo tanto, se denominan «hermanos»).
A continuación, vea cómo se diseña el primer párrafo, ya que se deriva directamente de este
. Sin embargo, el segundo párrafo no lo hace.
ver la pluma Anidamiento de CSS: combinador de hermanos vecinos de Christina Perricone (@hubspot) en CódigoPen.
Combinador general de hermanos
Un selector general de hermanos se escribe como un símbolo de tilde (~) y se aplica a todos los elementos que siguen al elemento hermano especificado. A diferencia del selector hermano adyacente, los elementos de destino no necesitan seguir inmediatamente al primer elemento.
En este ejemplo, todos
los elementos se estilizan a medida que avanzan
en el documento, aunque no todos ellos son directamente adyacentes entre sí.
ver la pluma CSS nesting: un combinador general de hermanos de Christina Perricone (@hubspot) en CódigoPen.
Escribiendo CSS puro
Anidar selectores de CSS es un pequeño truco que facilita mucho las cosas. Escribirá CSS más rápido, aplicará cambios de estilo de manera más eficiente y no tendrá que preocuparse por poner toneladas de atributos de identificación o clase en el marcado HTML correcto.
Los combinadores necesitarán un poco de práctica para hacerlo bien. Pero antes de que pueda dominar CSS y pasar a un marco como Bootstrap, debe aprenderlos: es un truco útil para su barra de herramientas frontal.
