CSS Tilde

En CSS, el Tilde es un símbolo de línea de WASE que se representa como "~". También se llama "Combinador de hermanastros posteriores". Utilizamos este combinador de tilde o posterior de hermana para separar dos selectores compuestos. Para decirlo de otra manera, podemos decir que el selector de Tilde elige todos los hermanos de elementos del elemento especificado. En este tutorial, discutiremos el funcionamiento del selector de Tilde. Usaremos este selector de Tilde en nuestros códigos y le demostraremos cómo funciona.

Ejemplo 1:

Para usar este selector de Tilde en CSS, debemos crear un archivo HTML primero y vincular este archivo con nuestro archivo CSS en el que usaremos el selector de TILDE. En este ejemplo, estamos creando un div y en este div, tenemos un encabezado y dos párrafos y una etiqueta de "recursos humanos" entre estos dos párrafos. Esta etiqueta de "recursos humanos" se usa para representar una ruptura temática entre los párrafos. Ahora, después de la finalización de este código HTML, vamos a pasar al archivo CSS en el que utilizamos este selector de Tilde.

A continuación se muestra nuestro código CSS, en el que diseñamos el encabezado cambiando su "color" a "verde" y alinearlo en el "centro" utilizando la propiedad de "alineación de texto". También cambiamos su "Fuente-Familia" y lo establecimos en "Argelino". Después de diseñar el encabezado, estamos usando el selector de Tilde. El primer elemento es el "HR" y el segundo es "P". Estamos utilizando este selector de Tilde para seleccionar todos los párrafos precedidos por el "HR" y luego aplicar algunas propiedades de estilo a estos párrafos. Alineamos el texto para "justificar" y establecemos el color del fondo utilizando la propiedad de "color de fondo" y usamos el "azul de polvo" para esto. También se utiliza la propiedad "del tamaño de la fuente" y otorga el valor de "120%" a esta propiedad. Luego, "argelino" se selecciona como la "familia de fuentes". Todas estas propiedades se aplicarán a los párrafos precedidos por el "HR".

Mire la salida a continuación, todas las propiedades que hemos utilizado anteriormente en el archivo CSS se aplican solo al párrafo precedido por el "HR". El párrafo anterior permanece sin cambios, pero el segundo párrafo después de que se cambia el "HR" y todo el estilo se aplica a este párrafo. Esto es solo por el selector de Tilde.

Ejemplo # 2:

Aquí, pusimos un Div. En este div, pusimos dos párrafos y un rumbo. Después de esto, colocamos otro div en este primer div y ponemos un párrafo y cerramos este segundo div. Fuera del segundo div, estamos poniendo otro párrafo y encabezando. Luego cerrando el primer div aquí. Después de cerrar el primer div, nuevamente ponga dos párrafos. Y luego cierre la etiqueta del cuerpo.

Aquí, colocamos el selector de Tilde y colocamos "P" como el primer elemento y también "P" como el segundo elemento y luego lo escribimos como "P ~ P". Significa que la primera "P" está precedida por la segunda "P". Seleccionará todo el "P" que es seguido por la primera "P". Todo el segundo "P" seguido por la primera "P" se diseñan en consecuencia. Utilizamos la propiedad "color" que establece el color de la fuente del párrafo y se establece en "negro". El tamaño de la fuente que estamos configurando aquí es "20px". Estamos utilizando la palabra clave "en negrita" como el valor de "Font-Weight". Y seleccionar la "Calibri" "Fuente-Familia" para esto. El "color de fondo" aparecerá en "Light Coral" porque estamos seleccionando este color aquí como el "color de fondo".

Puede notar en la salida a continuación que todos los segundos párrafos que son seguidos por el primer párrafo tienen el estilo, ya que hemos usado el selector de Tilde para esto. Al utilizar el selector de Tilde, seleccionamos todos los segundos párrafos anteriores al primer párrafo.

Ejemplo # 3:

En este código, tenemos un DIV y luego una lista desordenada fuera del DIV. Después de cerrar esta lista, escribimos un párrafo usando etiquetas "P" y luego creamos una segunda lista debajo de este párrafo. Cuando termina esta segunda lista, escribimos un encabezado usando etiquetas "H2". Después de este encabezado, tenemos otra lista. Todas las listas son listas desordenadas aquí.

Estamos usando "P" y luego el selector de Tilde. Después del selector de Tilde, tenemos "UL", lo que significa que selecciona todo el "UL" precedido por la "P". Utilizamos algunas propiedades de estilo para dar estilo al "UL" para hacer que la diferencia sea clara para usted cómo este Tilde selecciona elementos y aplica el estilo dado a los elementos seleccionados. Primero usamos la propiedad "color" y establecemos "verde" para el color de texto. Entonces, los elementos seleccionados se volverán en un color "verde". También estamos aumentando el "tamaño de fuente" a "22px" y estableciendo la "familia de fuentes" a "argelino". Establecimos el "color de fondo" en forma RGB y lo establecemos como "RGB (235, 235, 125)" que parece color amarillo.

Aquí, la salida muestra que la primera lista es simple y no hay cambios en la primera lista que no se selecciona, ya que está presente antes del párrafo y no está precedido por la "P". Las otras dos listas están diseñadas ya que ambas listas están precedidas por la "P". Estas dos listas están presentes después del párrafo, por lo que se seleccionan y luego están diseñados.

Ejemplo # 4:

Puedes ver aquí que hemos creado un div y un rumbo dentro de este. Luego dos párrafos fuera de este div. Debajo de esto, tenemos un Div más y se dirigimos al mismo tiempo que arriba y creamos dos párrafos.

Usamos el "div" como el primer selector y luego Tilde y luego "P" como el segundo selector. Tomará todos los párrafos que son seguidos por el div. El "fondo" que establecemos aquí es "RGB (111, 212, 111)", que es un color verde claro. Utilizamos "azul" como el "color" para que el texto aparezca "azul". También lo alineamos con el "centro" de la línea. Y "Georgia" es su "familia de fuentes" como hemos seleccionado aquí. También "en negrita" este texto usando "Bold" como el valor de "Font-Weight". El "tamaño de fuente" es "25px" esta vez y también es "cursiva" en "estilo de fuentes".

Todos los párrafos se seleccionan en la salida porque todos los párrafos están precedidos por el DIV . Entonces, selecciona todos los párrafos, y podemos ver que todas las propiedades que hemos utilizado se aplican a estos párrafos. El selector de Tilde ayuda a seleccionar todos los párrafos que son seguidos por el DIV y la aplicación de propiedades dentro de los aparatos ortopédicos de esto.

Conclusión:

Hemos presentado este tutorial para aprender el selector de Tilde en CSS. Aquí, hemos discutido qué es Tilde Selector y cómo usar este selector de Tilde en CSS y cómo funciona. Hemos colocado el primer selector y luego el selector de Tilde y luego el segundo selector. Como hemos explicado que selecciona el segundo selector que es seguido por el primer selector con la ayuda del selector de Tilde. Hemos demostrado múltiples ejemplos aquí en este tutorial.