Table des matières
Ces éléments ou sélecteurs peuvent être manipulés avec Jquery et css pour créer des effets et obtenir du contenu, le masquer ou l'ajouter et lui appliquer un effet, facilitant le travail des programmeurs. Certains sélecteurs sont plus connus pour le code css par exemple :IDENTIFIANTS
Ils sont des éléments de la plus haute hiérarchie et définissent des paramètres généraux pour les éléments d'un bloc. Ils sont définis comme #id et sont généralement appliqués aux listes ou aux blocs.
Ceci est le sélecteur d'identifiant de paragraphe
Paragraphe sans sélecteur
COURS
Ce sont des éléments de hiérarchie inférieure et sont utilisés pour des éléments individuels ou pour définir des classes au sein d'un identifiant, telles que :
Ceci est le sélecteur d'identifiant de paragraphe
Paragraphe bleu avec p
Paragraphe bleu avec divParagraphe rouge avec div
Alors que la classe indépendante .parrafoazul peut appliquer l'élément p qui ne dépend de personne, nous pouvons même l'appliquer à d'autres éléments tels que div, mais si nous essayons d'appliquer la classe parraforojo indépendamment de l'identifiant #paragraph, nous verrons que c'est le cas ne fonctionne pas car il ne respecte pas la hiérarchie qui impose son identifiant #paragraphe.
Il existe de nombreux sélecteurs que nous pouvons utiliser ici, nous en verrons quelques-uns
Sélecteur pair (pair) et impair (impair)
Ce sélecteur est appliqué à un tableau d'éléments qui utilisent la même classe et il peut affecter des éléments pairs ou impairs, par exemple on colore le fond d'une liste de paragraphes.
PARAGRAPHES
L'utilisateur 1 a laissé un message
L'utilisateur 2 a laissé un message
L'utilisateur 3 a laissé un message
L'utilisateur 4 a laissé un message
LISTE UL
- L'utilisateur 1 a laissé un message
- L'utilisateur 2 a laissé un message
- L'utilisateur 3 a laissé un message
- L'utilisateur 4 a laissé un message
SÉLECTEUR PREMIER (Premier) ET DERNIER (Dernier)
Ces sélecteurs nous permettent de manipuler le premier et le dernier élément d'une certaine liste, par exemple nous mettons la liste en gris, le premier élément en vert et le dernier élément en bleu.
LISTE UL
- L'utilisateur 1 a laissé un message
- L'utilisateur 2 a laissé un message
- L'utilisateur 3 a laissé un message
- L'utilisateur 4 a laissé un message
SÉLECTEUR DE MISE AU POINT
Le focus sur un élément est activé lorsque vous cliquez sur un élément et désactivé lorsque vous cliquez sur une autre zone du web ou sur un autre élément. On va voir un exemple avec un formulaire de login, on crée la classe .focologin puis on l'applique sur l'identifiant du formulaire #login pour affecter tous les éléments qu'il contient. Nous pouvons également l'appliquer à un calque ou à un bloc div et placer la forme à l'intérieur du bloc.
FORME
Mot de passe de l'utilisateur:
Attribuer ou modifier un style CSS à un élément avec AddClass
Si nous voulons attribuer un style CSS de manière dynamique ou le modifier en fonction d'une condition établie, nous utiliserons AddClass. Dans ce cas, nous avons un bouton de classe .green et au texte de type d'entrée, nous attribuons la classe .box de Jquery. La saisie du type de mot de passe n'est pas affectée et le bouton de soumission n'est pas affecté non plus puisque nous ne leur avons attribué aucune classe css.
FORMULAIRE D'INSCRIPTION
Nom:
Adresse:
Téléphone:
E-mail:
Ce sélecteur permet d'identifier un élément d'un tableau d'éléments selon la position dans laquelle se trouve une cellule d'un tableau, il faut garder à l'esprit que les éléments sont listés comme les indices d'une matrice commençant par 0,1,2, etc. .
| Titre A | Titre B | Titre C |
|---|---|---|
| Cellule 0 | Cellule 1 | Cellule 2 |
| Cellule 3 | Cellule 4 | Cellule 5 |
En continuant avec les tableaux et l'application des sélecteurs, nous verrons comment créer un design d'arrière-plan de manière alternée dans les couleurs des lignes d'un tableau, similaire à ce qui était précédemment appliqué avec les paragraphes et les listes. Nous n'ajoutons pas tellement de css ou de design pour que l'effet soit mieux apprécié en gros.
SELECTEUR nième-enfant
Poursuivant avec l'exemple précédent, nous pouvons utiliser le sélecteur nième enfant en complément, similaire au sélecteur eq, mais la différence est qu'avec le nième enfant, les positions peuvent être indiquées sous la forme d'une opération arithmétique. Il permet de sélectionner un ou plusieurs éléments mais à condition qu'il soit le nième enfant de son parent. Ce sélecteur est utile pour sélectionner le deuxième paragraphe d'un bloc ou le troisième élément d'une liste, etc. Les éléments ne sont pas pris comme un tableau mais dans l'ordre premier, second, etc.
Par exemple, si dans le script précédent nous ajoutons
Les colonnes impaires seront sélectionnées dans ce cas
- Colonnes impaires nième-enfant (2n + 1)
- Colonnes appariées nième-enfant (2n)
- Première et quatrième colonne nième-enfant (3n + 1)
