Accueil Médias sociaux Comment utiliser les sélecteurs de modèle CSS3 - les nuls

Comment utiliser les sélecteurs de modèle CSS3 - les nuls

Vidéo: TUTO CSS - #6 Sélecteurs Class et ID 2025

Vidéo: TUTO CSS - #6 Sélecteurs Class et ID 2025
Anonim

Dans certains cas, une sélection que vous devez faire dans CSS3 n'a rien à voir avec les balises ou les attributs, mais le modèle dans lequel les objets apparaissent sur la page. Par exemple, vous pouvez sélectionner uniquement le premier objet, quel que soit son objet.

Dans certains cas, vous souhaitez formater d'une manière ou d'une autre des membres alternatifs d'une liste ou d'un autre élément de données répétitif afin de permettre à l'utilisateur de voir chaque élément plus facilement. La liste suivante vous indique les sélecteurs de modèle couramment utilisés par les documents.

  • : première lettre: Sélectionnez la première lettre de l'objet spécifié. Ce sélecteur est utile pour créer des effets textuels spéciaux, tels que des lettrines.

    Il est extrêmement rare de voir la plupart des sélecteurs de motifs utilisés seuls, car vous ne voulez généralement pas mettre en forme uniquement la première lettre de chaque objet de la page d'une certaine manière. Généralement, vous voyez des sélecteurs de modèle utilisés en combinaison avec un sélecteur d'attribut, tel que le sélecteur de classe, ou avec un sélecteur de tag particulier.

    L'utilisation globale de sélecteurs de formes peut avoir des résultats inattendus ou même entraîner l'échec d'une application (en fonction de l'interaction entre le code de l'application et le CSS).

  • : première ligne: Sélectionne la première ligne de l'objet spécifié.

  • : avant: Sélectionne la zone immédiatement avant le contenu de l'objet spécifié. Ce sélecteur est normalement couplé à la propriété content pour insérer quelque chose de spécial avant le contenu de l'objet existant.

  • : après: Sélectionne la zone immédiatement après le contenu de l'objet spécifié. Ce sélecteur est normalement couplé à la propriété content pour insérer quelque chose de spécial avant le contenu de l'objet existant.

  • : premier-type: Sélectionne le premier objet d'un type spécifique.

    Même si la spécification ne vous dit pas que vous devez fournir un type ou un parent, certains sélecteurs de modèles ne fonctionneront pas sans un. Généralement, vous voyez le: sélecteur de premier type utilisé avec un sélecteur d'étiquette (p: first-of-type, par exemple), mais il peut également être utilisé avec un sélecteur d'attribut. Tous les autres sélecteurs de type et de motif enfant fonctionnent de la même manière.

  • : dernier-type: Sélectionne le dernier objet d'un type spécifique.

  • : uniquement de type: Sélectionne le seul objet d'un type spécifique. S'il y a plus d'un objet d'un type particulier, aucune sélection n'est faite.

  • : nth-of-type ( Number ): Sélectionne l'objet spécifié d'un type spécifique.

  • : nième-dernier-type ( Nombre ): Sélectionne l'objet spécifié d'un type spécifique, en commençant à la fin de la liste d'objets.

  • : first-child: Sélectionne le premier enfant d'un objet spécifié. Ce sélecteur est généralement utilisé pour appliquer une mise en forme spéciale au premier élément d'une liste ou d'un tableau.

  • : last-child: Sélectionne le dernier enfant d'un parent particulier.

  • : only-child: Sélectionne le seul enfant d'un parent particulier. Lorsqu'un objet parent a plus d'un enfant, aucune sélection n'est effectuée.

  • : nth-child ( Nombre ): Sélectionne l'enfant spécifié d'un parent particulier.

  • : nth-last-child ( Number ): Sélectionne l'enfant spécifié d'un parent particulier à partir de la fin de la liste des enfants.

Les sélecteurs de motifs peuvent créer des effets intéressants sur votre site. La procédure suivante examine rapidement ce que ces sélecteurs peuvent faire. Il est important de se rappeler que vous verrez souvent des sélecteurs, y compris des sélecteurs de modèles, alors considérez ceci comme un point de départ.

  1. Créez le fichier ExternalCSS. HTML et ExternalCSS. Fichiers CSS et copiez-les dans un nouveau dossier.

  2. Ouvrir ExternalCSS. HTML

  3. Tapez le code suivant après la balise

    existante dans le fichier et enregistrez les modifications sur le disque.

    • Un
    • Deux
    • Trois
    • Quatre
    • Cinq

    Dans ce cas, vous ajoutez une liste à la page pour faciliter la détection des motifs. Bien sûr, les modèles ne sont pas limités aux listes ou aux tableaux. Vous pouvez les utiliser avec n'importe quel arrangement d'objets qui pourraient se prêter à la sélection par un modèle.

  4. Ouvrir ExternalCSS. CSS.

  5. Tapez le code suivant après les styles existants et enregistrez les modifications sur le disque.

    . ListItem: première lettre {font-size: xx-large;}. ListItem: après {content: "27A8"; taille de police: x-large; La couleur rouge;}. ListItem: nth-child (impair) {background-color: LightBlue;}. ListItem: nth-child (2n + 2) {background-color: LightGreen;}
    
  6. Recharge la page de test.

    Vous voyez l'effet de la modification du style. Pour commencer, chaque balle commence par une lettre extra-large.

    À la fin de chaque balle, vous voyez un caractère de flèche spécial. Notez comment le CSS utilise 27A8 pour créer ce personnage. Lors de la visualisation de graphiques tels que celui de ikreator. com et celui de Petterhesselberg. com, vous voyez ces codes de caractères présentés avec une combinaison & # au début. CSS utilise les mêmes codes numériques, mais s'appuie sur une barre oblique inverse (/).

    Le sélecteur: nth-child () peut être utilisé de plusieurs façons. Même si l'exemple ne l'affiche pas, vous pouvez fournir un nombre pour sélectionner un élément enfant spécifique. Cependant, ce sélecteur accepte également un certain nombre d'autres entrées intéressantes. Par exemple, vous pouvez utiliser les mots-clés pair et impair pour sélectionner les objets pairs ou impairs dans une liste.

    Vous pouvez également fournir une équation qui utilise n pour indiquer l'objet actuel. Lorsque le navigateur saisit 0 pour n, par exemple, l'équation devient 2 * 0 + 2 ou l'élément 2. Si vous vouliez commencer par l'élément 3, vous utiliseriez 2n + 3. L'équation que vous fournissez peut être de toute complexité requise pour produire le résultat souhaité.

Comment utiliser les sélecteurs de modèle CSS3 - les nuls

Le choix des éditeurs

Valide Versus un document XML bien formé - mannequins

Valide Versus un document XML bien formé - mannequins

En XML, un document valide doit se conformer aux règles de sa définition DTD (Document Type Definition) ou schéma, qui définit quels éléments peuvent apparaître dans le document et comment les éléments peuvent s'imbriquer les uns dans les autres. Si un document n'est pas bien formé, il ne va pas très loin dans le monde XML, donc vous avez besoin de ...

Validation de votre page Web HTML5 - mannequins

Validation de votre page Web HTML5 - mannequins

Peu importe votre précaution, vous faites parfois des bêtises lorsque coder vos pages Web HTML5. Un outil comme un correcteur orthographique pour le code serait génial. Et voilà, il existe un tel outil de vérification de code. Le W3C Markup Validation Service, présenté par les mêmes personnes qui ont élaboré les normes ...

Espacement vertical en HTML - nuls

Espacement vertical en HTML - nuls

Pour le codage du contenu de la page en HTML pour vos pages Web, vous pourriez demander: «Comment puis-je me débarrasser de cet espacement (vertical)? "Entre les paragraphes. Ou, "Comment ajouter un espacement (vertical) entre les éléments de la liste? "D'abord, il sera utile de comprendre d'où vient cet espacement vertical. Espacement vertical en HTML ...

Le choix des éditeurs

Héberger des vidéos Mobile sur YouTube - des nuls

Héberger des vidéos Mobile sur YouTube - des nuls

Pour les webmestres mobiles qui ne veulent pas se démener Sur de nouveaux lexiques de spécifications techniques, l'option la plus simple est de laisser YouTube, représenté sur la figure, faire tout le travail d'hébergement et de diffusion de la vidéo. YouTube rend toutes ses vidéos mobiles conviviales, offrant la meilleure version pour chaque appareil. Lorsque vous téléchargez ...

Sites Web QuarkXPress utiles - mannequins

Sites Web QuarkXPress utiles - mannequins

Les utilisateurs de quarkXPress ont accès à une foule d'informations et de cadeaux liés à QuarkXPress. La prochaine fois que vous êtes en ligne, consultez certains de ces sites QuarkXPress et de publication assistée par ordinateur. Sites XTensions Des centaines de XTensions commerciales pour QuarkXPress sont disponibles pour Mac et Windows; ces XTensions gèrent un large éventail de tâches que QuarkXPress ne peut pas faire. Beaucoup d'informations ...

Activation de User Agent Switcher dans Safari - Témoins

Activation de User Agent Switcher dans Safari - Témoins

Lorsque vous testez un site Web Destiné à l'iPhone et l'iPad sur un ordinateur de bureau, si le script de détection de périphérique sur un serveur reconnaît que vous utilisez un navigateur sur un ordinateur, il ne vous montre pas la version du téléphone. C'est là que l'agent utilisateur entre dans l'image. Safari inclut des fonctionnalités spéciales qui permettent ...

Le choix des éditeurs

Raccourcis vers les centres de commande dans MYOB - mannequins

Raccourcis vers les centres de commande dans MYOB - mannequins

Vous pouvez vous rendre directement au centre de commande de votre choix MYOB. Appuyez sur la touche Ctrl de votre PC tout en appuyant sur l'un de ces chiffres - et vous allez au centre de commande de votre désir! Combinaison de touches Raccourci Résultat Ctrl-1 Centre de commande des comptes Ctrl-2 Centre de commande bancaire Ctrl-3 Centre de commande des ventes Ctrl-4 ...

Rapprochement de votre compte bancaire dans Sage 50 - variables nominales

Rapprochement de votre compte bancaire dans Sage 50 - variables nominales

Avant de commencer un rapprochement bancaire dans Sage 50, vous devez pour vous assurer que vous avez saisi la majorité de vos transactions financières pendant la période de réconciliation. Traditionnellement, les comptables réconcilient le compte bancaire à la fin de chaque mois, une fois qu'ils ont reçu leurs relevés bancaires. Cependant, l'avènement de la banque en ligne ...

Solutions et Knowledge in Salesforce. com Service Cloud - les nuls

Solutions et Knowledge in Salesforce. com Service Cloud - les nuls

En tant qu'agent, vous devez savoir quels outils sont à votre disposition dans Service Cloud pour faciliter votre travail. Plus spécifiquement, Salesforce propose deux outils majeurs de résolution de problèmes pour les clients et les agents de support, Solutions et Knowledge. Quelle est la différence, demandez-vous? Avant de regarder les différences, voici ce qu'elles contiennent ...