121 Shares 3517 views

CSS Selectors. Types de sélecteurs

La langue pour décrire l'apparence du document CSS évolue constamment. Avec le temps, non seulement sa puissance et sa fonctionnalité augmentent, mais aussi la flexibilité et la facilité d'utilisation.

Sélecteurs CSS

Commençons à comprendre. Ouvrez n'importe quel tutoriel CSS, au moins une section se concentrera sur les types de sélecteurs. Ce n'est pas surprenant, car ils constituent l'un des moyens les plus pratiques pour gérer le contenu de la page. Avec leur aide, vous pouvez interagir avec absolument n'importe quel élément HTML. Maintenant, il existe 7 types de sélecteurs:

  • Pour les tags;
  • Pour les cours;
  • Pour ID;
  • Universel;
  • Attributs;
  • Pour l'interaction avec les pseudo-classes;
  • Pour contrôler les pseudo-éléments.

La syntaxe est simple. Pour savoir comment utiliser les sélecteurs CSS, il suffit de lire à leur sujet. Quelle option choisir de contrôler le contenu dans votre cas? Essayons de comprendre.

Sélecteurs de balises

C'est l'option la plus simple, qui ne nécessite pas de connaissances spéciales pour l'écriture. Pour gérer les tags, vous devez utiliser leur nom. Supposons que le "cap" de votre site soit enveloppé dans une balise

. Pour le gérer en CSS, vous devez utiliser l'en-tête {}.

Avantages – facilité d'utilisation, polyvalence.

Inconvénients – un manque total de flexibilité. Dans l'exemple ci-dessus, toutes les étiquettes d'en-tête seront sélectionnées à la fois. Et si vous devez gérer un seul?

Sélecteurs de classe

L'option la plus courante. Conçu pour gérer les tags avec l'attribut de classe. Supposons que vous ayez trois blocs

dans votre code, dont chacun doit avoir une couleur spécifique. Comment faire cela? Les sélecteurs CSS standard pour les balises ne fonctionnent pas, ils spécifient les paramètres pour tous les blocs à la fois. La sortie est simple. Affectez une classe aux éléments. Par exemple, la première division a classé = 'rouge', la deuxième div – classe = 'bleu', la troisième classe = 'verte'. Maintenant, ils peuvent être sélectionnés à l'aide de tables CSS.

La syntaxe est: spécifiez le point ("."), Après quoi nous écrivons le nom de la classe. Pour contrôler le premier bloc, utilisez le design .red. La seconde est .blue et ainsi de suite.

Important! Il est recommandé d'utiliser des valeurs claires pour l'attribut de classe. Une mauvaise forme est l'utilisation de translit (par exemple, krasiviy-blok) ou des combinaisons aléatoires de lettres / nombres (ojfh834871). Dans un tel code, vous serez sûrement confus, sans parler des difficultés que ceux qui vont traiter le projet après vous devrez faire face. La meilleure option est d'utiliser une sorte de méthodologie, comme BEM.

Les avantages sont une flexibilité assez élevée.

Inconvénients – plusieurs éléments peuvent avoir la même classe, et donc ils seront édités simultanément. Le problème est résolu en utilisant la méthodologie, ainsi que l'héritage des préprocesseurs. Assurez-vous de maîtriser moins, sass ou un autre préprocesseur, ils simplifieront grandement le travail.

Sélecteur par ID

En ce qui concerne cette option, les opinions du codeur et des programmeurs sont ambiguës. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Certains manuels de CSS généralement ne recommandent pas d'utiliser des ID, car ils peuvent causer des problèmes d'héritage lorsqu'ils sont utilisés par inadvertance. Cependant, de nombreux spécialistes les distribuent activement tout au long du balisage. C'est à vous de décider. # »), затем имя блока. La syntaxe est: un caractère de réseau (" # "), puis un nom de bloc. #red. Par exemple, #red.

отличается от класса по нескольким параметрам. L'ID diffère de la classe de plusieurs façons. ID. Tout d'abord, il ne peut y avoir deux ID identiques sur la page . On leur attribue des noms uniques. Deuxièmement, un tel sélecteur a une priorité plus élevée. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Cela signifie que si vous donnez au bloc une classe rouge et spécifiez une couleur d' arrière-plan rouge dans les tables CSS , attribuez-le le même id bleu et spécifiez une couleur bleue, le bloc devient bleu.

Avantages – vous pouvez contrôler un élément spécifique, ne pas prêter attention aux styles pour les étiquettes et les classes.

ID и class. Inconvénients: il est facile de se confondre avec beaucoup d' ID et de classe.

Important! ID вам, в общем-то, не нужны. Si vous utilisez la méthodologie BEM (ou ses analogues), vous n'avez généralement pas besoin d' ID . Cette technique de mise en page implique l'utilisation de classes uniques, ce qui est beaucoup plus pratique.

Sélecteur universel

{}. Syntaxe: signe étoile ("*") et accolades, c'est-à-dire * {}.

Utilisé pour attribuer certains attributs à tous les éléments de la page à la fois. Quand peut-il être utile? box-sizing: border-box. Par exemple, si vous souhaitez définir la taille de la boîte de propriété de la page : border-box. div *{}. Il peut être utilisé non seulement pour gérer tous les composants du document, mais aussi pour contrôler tous les enfants d'un bloc particulier, par exemple div * {}.

Avantages – vous pouvez gérer un grand nombre d'articles en même temps.

Les inconvénients ne sont pas une option flexible. En outre, l'utilisation de ce sélecteur ralentit dans certains cas la page.

Par attributs

Il est possible de gérer un élément avec un attribut spécifique. Par exemple, vous avez plusieurs variables de saisie avec un attribut de type différent. L'un d'entre eux est le texte, le second est le mot de passe, le troisième est le numéro. Bien sûr, vous pouvez affecter chaque classe ou ID, mais ce n'est pas toujours pratique. Les sélecteurs CSS par attributs permettent de spécifier des valeurs pour certaines étiquettes avec une précision maximale. Par exemple, comme ceci:

Entrée [type = 'text'] {}

Ce sélecteur d'attributs sélectionnera toutes les saisies avec le type de texte.

L'outil est assez flexible, il peut être utilisé avec toutes les étiquettes qui peuvent avoir des attributs. Mais ce n'est pas tout! Dans la spécification CSS, il est possible de gérer les éléments même avec une grande commodité!

Imaginez que votre page a une entrée avec l'espace réservé de l'attribut = "Entrer le nom" et l'espace réservé d'entrée = "Entrer le mot de passe". Vous pouvez également les sélectionner à l'aide du sélecteur! La construction suivante est utilisée pour cela:

Entrée [placeholder = "Entrer le nom"] {} ou entrer [placeholder = "Entrer le mot de passe"]

Un travail plus flexible avec des attributs est possible. Disons que vous avez plusieurs tags avec des attributs de titre similaires (par exemple, "Caspian" et "Caspian"). Pour sélectionner les deux, utilisez les sélecteurs suivants:

[Titre * = "Caspien"]

CSS sélectionnera tous les éléments du titre dont il existe des symboles "Caspienne", à savoir "Caspienne" et "Caspienne".

Vous pouvez également sélectionner des balises dont les attributs commencent avec certains caractères:

[Titre ^ = "le personnage que vous avez besoin"] {}

Ou finis avec eux:

[Titre $ = "caractère désiré"] {}.

Avantages – flexibilité maximale. Vous pouvez sélectionner n'importe quel élément de page existant sans se soucier des cours.

Inconvénients – utilisés relativement rarement, uniquement dans des cas spécifiques. De nombreux concepteurs de mise en page préfèrent la méthodologie, car il est plus facile de spécifier une classe que de placer plusieurs crochets et "égaux". En outre, ces sélecteurs ne fonctionnent pas dans Internet Explorer version 7 ou inférieure. Cependant, qui a maintenant besoin de l'ancien Internet Explorer?

Sélecteurs de pseudo-classe

Une pseudo-classe indique l'état d'un élément. Par exemple: survoler – ce qui arrive à une partie de la page lorsque survolent,: visité-visité le lien. Cela comprend des éléments comme: premier enfant et dernier enfant.

Ce type de sélecteurs est activement utilisé dans la mise en page moderne, car grâce à cela, vous pouvez créer la page "en direct" sans utiliser JavaScript. Par exemple, vous voulez le faire de sorte que lorsque vous passez le volant sur un bouton avec la classe btn, sa couleur change. Pour ce faire, nous utilisons la construction suivante:

.btn: hover {

Couleur d'arrière-plan: rouge;

}

Pour la beauté, vous pouvez spécifier la propriété du bouton dans les propriétés principales de ce bouton, par exemple, en 0.5s – dans ce cas, le bouton ne rougit pas instantanément, mais dans une demi-seconde.

Avantages – utilisé activement pour "relancer" les pages. Facile à utiliser.

Inconvénients – ils ne le sont pas. C'est vraiment un outil pratique. Cependant, les éditeurs inexpérimentés peuvent se confondre dans l'abondance des pseudo-classes. Le problème est résolu par l'étude et la pratique.

Sélecteurs à pseudo-élément

Les «Pseudo-éléments» sont les parties de la page qui ne sont pas en HTML, mais elles peuvent encore être gérées. N'avez-vous pas compris? Tout est plus simple qu'il n'y parait. Par exemple, vous voulez faire la première lettre dans la ligne grande et rouge, laissant l'autre texte petit et noir. Bien sûr, vous pouvez joindre cette lettre dans une certaine classe, mais c'est long et ennuyeux. Il est beaucoup plus facile de sélectionner le paragraphe entier et d'utiliser le pseudo-élément :: première lettre. Il vous permet de contrôler l'apparence de la première lettre.

Il existe un nombre assez important de pseudo-éléments. Il est peu probable que les listes dans le cadre d'un article ne fonctionnent pas. Vous pouvez trouver des informations pertinentes dans votre moteur de recherche préféré.

Avantages – donne l'opportunité d'ajuster l'apparence de la page de manière flexible.

Inconvénients – les débutants sont souvent confus. De nombreux sélecteurs de ce type ne fonctionnent que dans certains navigateurs.

Pour résumer

Le sélecteur est un outil puissant pour contrôler le flux de documents. Merci à lui, vous pouvez sélectionner absolument tous les composants de la page (même le existant n'est que conditionnel). Assurez-vous d'apprendre toutes les options disponibles ou au moins de les écrire. Ceci est particulièrement important si vous créez des pages complexes avec un design moderne et beaucoup d'éléments interactifs.