CSS-sélecteurs pour chaque jour

Types de sélecteurs

Selector tag agit comme un nom sélecteur de balises pour les propriétés que vous souhaitez modifier.

Le sélecteur universel, qui est désigné par le symbole * et est utilisé pour modifier les propriétés nécessaires de tous les éléments sur la page.

Les classes sont utilisées pour les éléments avec un attribut de classe et la valeur.

Les identificateurs sont utilisés pour les éléments avec l'attribut id et la valeur. La principale différence entre les classes d'identificateurs est que les noms de la seconde doit être unique, ne se répète pas, ce qui leur permet d'être utilisés en conjonction avec des scripts (JavaScript).

Les pseudo-classes sont conçues pour changer le style des éléments de page existants en fonction de leur état dynamique, comme lorsque l'on travaille avec des liens (: link ,: visité ,: hover ,: focus ,: active). Les pseudo-éléments définissent des éléments de style qui ne sont pas clairement définies dans la structure du document (: first-letter ,: première -ligne), et permettent de générer et de styliser le contenu de la non-existant (: avant ,: après et propriété du contenu). En CSS3 pseudo-éléments commencent par deux deux - points :: (:: first-letter, :: première ligne, avant ::, :: après).

Attribut sélecteurs. Laissez styliser élément non seulement pour la valeur de l'étiquette, mais aussi sur la valeur d'un attribut (un [attr]).

sélecteurs contextuels. les articles coiffants au sein de l'autre élément (ab).

sélecteurs d'enfants. élément situé immédiatement derrière un autre élément de coiffage et est son descendant direct (a> b).

sélecteurs à proximité. Conçu pour le style des éléments voisins qui ont un parent commun. (A + b)

sélecteurs connexes. Les sélecteurs sont semblables à adjacents, mais avec la différence que les éléments voisins sont de style tout, non seulement le premier élément adjacent. Pour la première fois apparu dans CSS3. (A ~ b).

Commençons!

*

  * {
  margin: 0;
  padding: 0;
  }
 

Commençons par les choses les plus simples pour les débutants, avant de procéder à des sélecteurs avancés.

L'astérisque sélectionne tous les éléments sur la page. De nombreux développeurs web utilisent pour "reset" de tout le rembourrage interne et externe.

En outre, le symbole * peut être utilisé pour les éléments de l'objet de l'enfant.

  #container * {
  border: 1px solid black;
  }
 

Ce code est destiné à tous les éléments qui sont les enfants de l'unité avec le conteneur d'identifiant.

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
6.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

# X

  #container {
  largeur: 960px;
  margin: auto;
  }
 

treillis symbole permet de sélectionner des éléments par ID. Ceci est l'une des façons les plus courantes de sélection d'éléments, mais soyez prudent lorsque vous l'utilisez.

"Demandez-vous: Je suis sûr que vous devez utiliser id pour ajouter un élément de s'y référer?"

sélecteurs de Id sont rigides et difficiles à réutiliser dans différents projets. Si possible, essayez d'utiliser d'abord le nom de tag ou même une pseudo-classe.

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
6.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

.X

  .error {
  color: red;
  }
 

Ceci est un sélecteur de classe. La différence entre l'identifiant et les classes qui aident avec des classes, vous pouvez sélectionner plusieurs éléments. Utilisez les classes, si vous voulez appliquer un style à un groupe d'éléments.

Sinon, utilisez l'identifiant pour trouver la "aiguille dans la botte de foin" et appliquer un style à un seul objet particulier.

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
6.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

XY

  li a {
  text-decoration: none;
  }
 

Le type sélecteur suivant couramment utilisé - sélecteur enfant. Il doit être utilisé lorsque vous avez besoin pour produire une sélection d'éléments ponctuels.

Par exemple, si vous avez à choisir, non pas tous les liens balises, et seuls ceux qui sont dans une liste non ordonnée? Tel est le cas lorsque vous devez utiliser les sélecteurs descendants.

"Astuce: Si votre sélecteur ressemble XYZA B.error, alors vous êtes probablement en train de faire quelque chose dans la façon dont vous toujours demander si cela est vraiment la meilleure façon."

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
6.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X

  a {color: red;}
  ul {margin-left: 0px;}
 

Que faire si vous voulez faire référence à tous les éléments d'un type particulier sur la page, si elles ne disposent pas d'un identifiant ou une classe? Facilite, utilisez les sélecteurs de type. Si vous avez besoin pour sélectionner toutes les listes à puces, utilisez ul {}.

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
6.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: visité et X: lien

  a: link {color: red;}
  a: visited {color: purple;}
 

Ici, nous utilisons la pseudo-classe: lien pour sélectionner tous les liens, qui n'a pas encore été accompli clic.

Il y a aussi une pseudo-classe: visited, qui, comme on pouvait s'y attendre, nous permet d'appliquer le style que pour ces liens, qui a été présentée ou cliquez sur une transition.

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X + Y

  ul + p {
  color: red;
  }
 

Ce soi-disant semi-sélecteur. Dans ce cas, chaque paragraphe immédiatement après chaque élément ul sera rouge.

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X> Y

  #container> ul {
  border: 1px solid black;
  }
 

La différence entre XY et X> Y est que ce dernier choisira les descendants directs. Prenons l'exemple suivant:

  <Div id = "container">
  <Ul>
  <Li> élément de liste
  <Ul>
  <Li> Descendant </ li>
  </ Ul>
  </ Li>
  <Li> </ li> élément de liste
  <Li> </ li> élément de liste
  <Li> </ li> élément de liste
  </ Ul>
  </ Div>
 

Sélecteur #container> ul va choisir uniquement les éléments ul, qui sont les descendants directs de la div avec le conteneur de bloc identifiant. Ie dans ce cas, le sélecteur ne prend pas loin ul d'élément, qui est un enfant du premier élément li.

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X ~ Y

  ul ~ p {
  color: red;
  }
 

Cette combinaison de soeur (frères et sœurs) des éléments similaires à X + Y, mais il est moins stricte. Si dans le cas ul + p est sélectionné, seuls les premiers éléments de p, suite à la ul (ie, il y a contiguïté dans la sélection), puis devant nous est maintenant sélecteur plus commun.

Dans ce cas , il permet de sélectionner tous les éléments p, suivant l'élément ul.

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X [title]

  un [titre] {
  couleur: vert;
  }
 

Ici, nous nous référons au sélecteur d'attribut. Dans notre exemple, nous allons être peint en vert seulement des liens avec le titre d'attribut.

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X [href = "foo"]

  a [href = "http://www.codeharmony.ru"] {
  color: red;
  }
 

Le code ci-dessus donne un style tous les liens dans l'attribut href est égal http://www.codeharmony.ru. Ces liens seront rouges. Le reste des liens ne sera pas obtenir ce style.

Cela fonctionne bien, mais il est un peu rigide. Que faire si le lien conduit effectivement à Codeharmony.ru mais peut-être l'adresse est la codeharmony.ru place http://www.codeharmony.ru? Dans de tels cas, nous pouvons utiliser une expression régulière.

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X [* href = "codeharmony"]

  a [* href = "codeharmony"] {
  color: red;
  }
 

Allez; ceci est juste ce qu'il nous faut. L'astérisque signifie que la valeur désirée peut être dans une partie quelconque de l'attribut href. Ainsi, nous pouvons sélectionner et http://www.codeharmony.ru et www.codeharmony.ru et codeharmony.ru.

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X [href ^ = "http"]

  a [href ^ = "http"] {
  background: url (path / to / externe / icon.png) no-repeat;
  padding-left: 10px;
  }
 

Avez-vous déjà pensé à la façon dont certains sites à côté des liens qui mènent à d'autres sites (externes au courant) portent de petites icônes qui donnent à l'utilisateur savoir à ce sujet? Ceci est excellent, "rappels" à l'utilisateur que le lien mène vers un autre site.

Ceci est fait en utilisant le symbole ^ (carat). Il est couramment utilisé dans les expressions régulières pour indiquer le début de la ligne. Si nous voulons sélectionner des liens dont l'attribut href commence par http, nous pouvons utiliser le sélecteur dans l'exemple ci-dessus.

"S'il vous plaît noter que nous ne cherchons pas à http :. // Cette option est facultative et, par ailleurs, ne prend pas en compte les liens sur les https protocole: //".

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X [$ href = ". Jpg"]

  un [$ href = ". jpg"] {
  color: red;
  }
 

Et nous utilisons une expression régulière encore et symbole $ pour indiquer la fin de la ligne. Dans cet exemple, nous recherchons tous les liens qui renvoient à des images avec l'extension .jpg. Bien sûr, cette approche ne fonctionnera pas pour les images avec l'extension .gif, .png, etc.

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X [data - * = "foo"]

  un [data-filetype = "image"] {
  color: red;
  }
 

Comment pouvons-nous couvrir les différents types d'images? Nous pouvons créer, par exemple, le nombre de sélecteurs:

  un [$ = ". jpg" href],
  un [$ = ". jpeg" href],
  un [$ = ". png" href],
  un [$ href = ". gif"] {
  color: red;
  }
 

Mais il est une corvée et pas élégant. Une autre option - est de créer votre propre attribut data-filetype et l' ajouter à chaque lien menant à l'image.

  <a href="path/to/image.jpg" data-filetype="image"> </a> Lien 

Ce faisant, nous pouvons utiliser le code dans cet exemple:

  un [data-filetype = "image"] {
  color: red;
  }
 

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X [foo ~ = "bar"]

  un [data-info ~ = "external"] {
  color: red;
  }

  un [data-info ~ = "image"] {
  border: 1px solid black;
  }
 

Voici une autre astuce intéressante, pas tout le monde sait. ~ (Tilde) nous permet de sélectionner les attributs avec des valeurs séparées par des espaces, à savoir,

  <a href="path/to/image.jpg" data-info="external image"> Cliquez ici </a> 

En utilisant cette technique, nous pouvons faire l'échantillon avec les combinaisons souhaitées de:

  / * Sélectionnez l'attribut data-info, qui contient la valeur d'un * externe /
  un [data-info ~ = "external"] {
  color: red;
  }

  / * Et sélectionnez l'attribut data-info qui contient la valeur de l'image * /
  un [data-info ~ = "image"] {
  border: 1px solid black;
  }
 

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: checked

  input [type = la radio]: checked {
  border: 1px solid black;
  }
 

Cette pseudo-classe sélectionne les éléments qui ont été notés, par exemple, un bouton radio ou case à cocher.

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: après

  .clearfix: après {
  contenu: "";
  display: block;
  clear: both;
  visibility: hidden;
  font-size: 0;
  hauteur: 0;
  }

  .clearfix {
  * Affichage: inline-block;
  _height: 1%;
  }
 

Cette pseudo-classe vous permet de générer du contenu autour de l'élément sélectionné.

Cet exemple montre comment utiliser la pseudo-classe: après un bloc est créé après une ligne vide avec le .clearfix de classe, puis effacé. Une bonne méthode, il est possible d'appliquer le overflow: hidden.

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: hover

  div: hover {
  background: # e3e3e3;
  }
 

Que vous savez exactement. Nom officiel sonne comme une «opération basée sur l'utilisateur pseudo-classe,." Il semble effrayant, mais en réalité, tout est simple. Voulez-vous appliquer à l'élément un certain style quand il déplace le curseur de la souris? Ceci est la même chose!

"Rappelez-vous que les anciennes versions de IE ne comprennent pas cette pseudo-classe par rapport à autre chose que d'une balise."

Souvent, cette technique est utilisée pour définir la limite inférieure pour la référence lorsque vous passez la souris sur eux:

  a: hover {
  border-bottom: 1px solid black;
  }
 

"Mega-cheat:-bottom border: 1px solid black; ressemble mieux que text-decoration: underline;"

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
6.0+ (en IE6 est seulement en relation avec les liens)	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: non (sélecteur)

  div: non (#container) {
  color: blue;
  }
 

Le déni peut également être très utile. Supposons que je veux tout sélectionner div contenant, mais avec réservoir d'id. A cet effet, le code de refus est parfait (pas égal).

Si je dois sélectionner tous les éléments, à l'exception des balises de paragraphe, nous pouvons écrire:

  *: Non (p) {
  couleur: vert;
  }
 

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X :: pseudoElement

  p :: first-line {
  font-weight: bold;
  font-size: 1.2em;
  }
 

Les pseudo-éléments peuvent être utilisés pour rendre les styles dans un élément, par exemple, la première ligne ou la première lettre. Elle ne concerne que les éléments de bloc.

Sélectionnez la première lettre du paragraphe:

  p :: first-letter {
  float: left;
  font-size: 2em;
  font-weight: bold;
  font-family: cursive;
  padding-right: 2px;
  }
 

Ce morceau de code trouverez tous les paragraphes sur la page, et sera applicable à la première lettre de chacun le style spécifié. Souvent, il est utilisé pour créer l'effet de "un titre de journal."

Sélectionnez la première ligne d'un paragraphe:

  p :: first-line {
  font-weight: bold;
  font-size: 1.2em;
  }
 

De même que pour l'exemple précédent, mais dans ce cas, la première ligne de chaque section est sélectionnée.

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
6.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: nth-child (n)

  li: nth-child (3) {
  color: red;
  }
 

Rappelez-vous les jours où nous étions pas en mesure de se référer à un des éléments spécifiques de l'enfant en série? Cette classe de pseudo résout ce problème!

L'entier est prise comme paramètre. Si vous voulez sélectionner le 2ème élément dans la liste, vous devez utiliser une construction: li: nth-child (2).

Nous pouvons même choisir le groupe de descendants des éléments. Par exemple, pour sélectionner chaque quatrième élément de la liste, vous devez utiliser une construction: li: nth-child (4n ).

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: nth-last-child (n)

  li: nth-last-child (2) {
  color: red;
  }
 

Que faire si vous avez une grande liste à puces et vous devez, par exemple, pour sélectionner le troisième élément de la fin. Au lieu d'écrire li: nth-child (397), vous pouvez utiliser le nième-last-child pseudo-classe.

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: nth-of-type (n)

  ul: nth-of-type (3) {
  border: 1px solid black;
  }
 

Parfois, il y a des situations où, au lieu de choisir certains descendants de faire un choix sur le type d'élément.

Imaginez qu'il ya cinq listes à puces sur la page. Si vous avez besoin d'appliquer le style que dans la troisième liste, mais il ne dispose pas d' un identifiant unique et d' autres "indices", vous pouvez utiliser la pseudo-classe nième-of-type (n) . Le code ci-dessus montre comment faire le style que la troisième liste à puces.

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
9.0+	1.0+		1.0+	1.0+	1.0+	1.0+

X: nth-last-of-type (n)

  ul: nth-last-of-type (3) {
  border: 1px solid black;
  }
 

Oui, pour compléter le tableau, il y a aussi une option. Ainsi, on peut choisir un élément de type n dans une certaine gamme.

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: first-child

  ul li: first-child {
  border-top: none;
  }
 

Cette pseudo-classe vous permet de sélectionner seulement le premier enfant de l'élément parent. Elle est souvent utilisée pour éliminer les frontières des premier et dernier éléments de la liste.

Par exemple, si vous avez une liste de lignes, dont chacune a un border-top et border-bottom, les premiers et derniers éléments de la liste seront un peu distrait de l'ensemble du système.

Vous pouvez utiliser cette pseudo-classe pour combler cette lacune.

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: last-child

  ul> li: last-child {
  couleur: vert;
  }
 

En revanche, la classe de première enfant, dernier enfant choisira le dernier élément de l'élément parent.

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: seulement l'enfant

  div p: only-child {
  color: red;
  }
 

Franchement, il est rarement utilisé par la pseudo-classe, mais, néanmoins, lui aussi, est utile. Il vous permet de sélectionner les éléments qui sont les seuls descendants de leurs parents.

Dans notre exemple, le style sera appliqué uniquement à un paragraphe, qui est le seul descendant de la div.

Considérons, pour plus de clarté, ce balisage:

  <Div> <p> Il n'y a qu'un seul paragraphe dans la section. </ P> </ div>

  <Div>
  <P> Voici le premier paragraphe de la section. </ P>
  <P> Voici le deuxième paragraphe de la section. </ P>
  </ Div>
 

Dans ce cas, les paragraphes du deuxième bloc ne sont pas sélectionnés div. Le style sera appliqué uniquement à un paragraphe du premier bloc de div.

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: seulement-of-type

  li: only-of-type {
  font-weight: bold;
  }
 

Cette pseudo-classe sélectionne des éléments qui ne possèdent pas les frères et sœurs qui les contiennent dans un récipient. Par exemple, nous allons sélectionner tous ul, qui contiennent un seul li.

Vous pouvez écrire ul li, mais cette méthode permet de sélectionner tous les éléments li. La seule façon - d'utiliser uniquement-of-type.

  ul> li: only-of-type {
  font-weight: bold;
  }
 

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: first-of-Type

Cette pseudo-classe vous permet de sélectionner le premier frère du même type.

Pour mieux comprendre cela, copiez le code suivant à votre éditeur:

  <Div>
  <P> Il paragraphe. </ P>
  <Ul>
  Élément <li> 1. </ Li>
  Élément <li> 2. </ Li>
  </ Ul>

  <Ul>
  Élément <li> 3. </ Li>
  Élément <li> 4. </ Li>
  </ Ul>
  </ Div>
 

Maintenant, sans lire plus loin, essayer de donner un style que "élément 2". Lorsque conjecture (ou abandonner), lisez la suite.

solution 1

Il y a plusieurs façons de résoudre ce problème. Considérons quelques-uns d'entre eux. Commençons par l'utilisation de la première du type:

  ul: first-de-type> li: nth-child (2) {
  font-weight: bold;
  }
 

Ce code dit: "Trouver la première liste à puces sur la page, puis trouver que ses descendants directs, qui sont des éléments de li puis sélectionnez seulement la deuxième dans l'ordre des éléments de li .."

solution 2

Une autre option - utiliser le sélecteur adjacent:

  p + ul li: last-child {
  font-weight: bold;
  }
 

Ici , nous trouvons le ul, immédiatement après la section d'étiquette, puis trouver le dernier de son élément enfant.

solution 3

Vous pouvez toujours jouer un peu avec les sélecteurs, et de le faire:

  ul: first-of-Type li: nth-last-child (1) {
  font-weight: bold;
  }
 

Maintenant , nous obtenons déjà le premier élément ul sur la page, et ensuite chercher le premier élément li, mais en partant de la fin.

Compatibilité:

Internet Explorer	chrome	opéra	safari	Firefox	androïde	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

conclusion

Si vous écrivez encore code, en tenant compte de l'existence de IE6, alors vous devez être extrêmement prudent lors de l'utilisation de nouveaux sélecteurs. Mais ne faites pas cette excuse, ne dites pas que vous ne devez savoir - il va rendre la vie difficile pour vous-même.

Si vous travaillez avec l'une des bibliothèques JavaScript, comme le jQuery, je cherche toujours à utiliser le «natif» des sélecteurs CSS3, chaque fois que possible. Dans ce cas, votre code sera plus rapide.

sélecteurs CSS Mémo