CSS Tilde

Dans CSS, le Tilde est un symbole de ligne Wase qui est représenté comme «~». Il est également appelé «combinateur de fraises ultérieures». Nous utilisons ce combinateur Tilde ou Siding-Sibling pour séparer deux sélecteurs composés. Pour dire les choses d'une autre manière, nous pouvons dire que le sélecteur Tilde choisit tous les frères et sœurs de l'élément de l'élément spécifié. Dans ce tutoriel, nous discuterons du fonctionnement du sélecteur Tilde. Nous utiliserons ce sélecteur Tilde dans nos codes et vous montrerons comment cela fonctionne.

Exemple 1:

Pour utiliser ce sélecteur Tilde dans CSS, nous devons d'abord créer un fichier HTML et lier ce fichier avec notre fichier CSS dans lequel nous utiliserons le sélecteur Tilde. Dans cet exemple, nous créons une div et dans cette div, nous avons un titre et deux paragraphes et une étiquette «HR» entre ces deux paragraphes. Cette balise «HR» est utilisée pour représenter une rupture thématique entre les paragraphes. Maintenant, après l'achèvement de ce code HTML, nous allons passer au fichier CSS dans lequel nous utilisons ce sélecteur Tilde.

Vous trouverez ci-dessous notre code CSS, dans lequel nous stylissons l'en-tête en changeant sa «couleur» en «vert» et en l'alignant dans le «centre» en utilisant la propriété «Text-Align». Nous avons également changé sa «famille de police» et l'avons mis sur «Algérien». Après avoir stylé le cap, nous utilisons le sélecteur Tilde. Le premier élément est le «HR» et le second est «P». Nous utilisons ce sélecteur Tilde pour sélectionner tous les paragraphes qui sont précédés par les «RH», puis appliquant des propriétés de style à ces paragraphes. Nous alignons le texte pour «justifier» et définissons la couleur de l'arrière-plan à l'aide de la propriété «fond d'arrière-plan» et utilisons le «bleu poudre» pour cela. La propriété «taille de police» est également utilisée et donne la valeur de «120%» à cette propriété. Ensuite, «Algerien» est sélectionné comme «Font-Family». Toutes ces propriétés s'appliqueront aux paragraphes qui sont précédés par les «RH».

Regardez la sortie ci-dessous, toutes les propriétés que nous avons utilisées ci-dessus dans le fichier CSS sont appliquées uniquement au paragraphe précédé par le «RH». Le paragraphe ci-dessus reste inchangé mais le deuxième paragraphe après la «RH» est modifié et tout style est appliqué à ce paragraphe. C'est juste à cause du sélecteur Tilde.

Exemple n ° 2:

Ici, nous avons mis un div. Dans cette div, nous avons mis deux paragraphes et un titre. Après cela, nous plaçons une autre div dans cette première div et avons mis un paragraphe et fermons cette deuxième div. En dehors de la deuxième div, nous mettons un autre paragraphe et nous dirigeons. Puis fermer la première div ici. Après avoir fermé la première div, mettez à nouveau deux paragraphes. Puis fermer l'étiquette corporelle.

Ici, nous mettons le sélecteur de Tilde et nous placons «P» comme premier élément et aussi «p» comme deuxième élément puis l'écrivez comme «p ~ p». Cela signifie que le premier «P» est précédé par le deuxième «P». Il sélectionnera tout le «P» qui est suivi du premier «P». Tout le deuxième «p» qui est suivi par le premier «P» est stylé en conséquence. Nous utilisons la propriété «couleur» qui définit la couleur de la police du paragraphe et réglée sur «noir». La taille de la police que nous définissons ici est «20px». Nous utilisons le mot-clé «gras» comme valeur de «poids de police». Et sélectionner le «calibri» «font-famille» pour cela. Le «Color d'arrière-plan» apparaîtra dans «Light Coral» car nous sélectionnons cette couleur ici comme «Color d'arrière-plan».

Vous pouvez remarquer dans la sortie ci-dessous que tous les deuxièmes paragraphes suivis par le premier paragraphe sont stylés car nous avons utilisé le sélecteur Tilde pour cela. En utilisant le sélecteur Tilde, nous sélectionnons tous les deuxièmes paragraphes précédant le premier paragraphe.

Exemple # 3:

Dans ce code, nous avons un div puis une liste non ordonnée en dehors du div. Après avoir fermé cette liste, nous écrivons un paragraphe à l'aide de balises «P», puis créons une deuxième liste ci-dessous ce paragraphe. Lorsque cette deuxième liste se termine, nous écrivons un titre à l'aide de balises «H2». Après cette rubrique, nous avons une autre liste. Toutes les listes sont des listes non ordonnées ici.

Nous utilisons «P» puis le sélecteur Tilde. Après le sélecteur Tilde, nous avons «UL», ce qui signifie qu'il sélectionne tous les «UL» précédés par le «P». Nous utilisons certaines propriétés de style pour donner un style à «UL» pour rendre la différence claire pour vous comment ce tilde sélectionne les éléments et appliquer le style donné aux éléments sélectionnés. Nous utilisons d'abord la propriété «couleur» et définissons «vert» pour la couleur du texte. Ainsi, les éléments sélectionnés rendront dans une couleur «verte». Nous augmentons également la «taille de la police» à «22px» et la création de «Font-Family» à «algérien». Nous définissons la «couleur arrière.

Ici, la sortie montre que la première liste est simple et qu'il n'y a pas de changement dans la première liste, il n'est pas sélectionné car il est présent avant le paragraphe et n'est pas précédé par le «P». Les deux autres listes sont stylisées car les deux listes sont précédées par le «P». Ces deux listes sont présentes après le paragraphe, elles sont donc sélectionnées puis stylisées.

Exemple n ° 4:

Vous pouvez voir ici que nous avons créé une div et une direction à l'intérieur. Puis deux paragraphes en dehors de cette div. En dessous, nous avons une div de plus et nous nous dirigeons comme ci-dessus et avons créé deux paragraphes.

Nous utilisons le «div» comme premier sélecteur puis Tilde puis «P» comme deuxième sélecteur. Il faudra tous les paragraphes qui sont suivis par le div. Le «fond» que nous avons défini ici est «RVB (111, 212, 111)» qui est une couleur vert clair. Nous utilisons le «bleu» comme «couleur» afin que le texte apparaisse «bleu». Nous l'alignons également sur le «centre» de la ligne. Et «Géorgie» est sa «famille de police» comme nous l'avons sélectionné ici. Nous avons également «audacieux» ce texte en utilisant «Bold» comme valeur de «poids de police». La «taille de police» est «25px» cette fois et c'est aussi «italique» dans le «style de police».

Tous les paragraphes sont sélectionnés dans la sortie car tous les paragraphes sont précédés par le div . Ainsi, il sélectionne tous les paragraphes, et nous pouvons voir que toutes les propriétés que nous avons utilisées sont appliquées à ces paragraphes. Le sélecteur Tilde aide à sélectionner tous les paragraphes qui sont suivis de la div et en appliquant des propriétés à l'intérieur des accolades bouclées de ce.

Conclusion:

Nous avons présenté ce tutoriel pour apprendre le sélecteur Tilde dans CSS. Ici, nous avons discuté de ce qu'est le sélecteur Tilde et comment utiliser ce sélecteur Tilde dans CSS et comment cela fonctionne. Nous avons placé le premier sélecteur puis le sélecteur Tilde puis le deuxième sélecteur. Comme nous l'avons expliqué, il sélectionne le deuxième sélecteur qui est suivi du premier sélecteur à l'aide du sélecteur Tilde. Nous avons démontré plusieurs exemples ici dans ce tutoriel.