Bonjour, aujourd'hui, nous allons parler de sélecteurs avancés.
Jusqu' à présent, lorsque nous avons écrit nos règles,
nous avons écrit nos règles pour un type spécifique de balise.
On a dit h1 ou p ou h2.
Nous nous sommes donc concentrés sur une chose qui couvre tous les différents éléments de
ce type.
Mais que se passe-t-il si vous ne voulez pas styliser tous les liens, juste certains d'entre eux ?
Ou vous ne voulez pas styliser toutes vos listes,
vous voulez simplement styliser certaines d'entre elles ?
Eh bien, maintenant nous allons parler de ce type de sélecteurs avancés
qui nous laisseront faire exactement ça.
CSS va vous donner tellement d'options que dans cette conférence, je vais essayer d'en
couvrir autant que je peux, mais ce sera toujours à vous de partir et de
chercher un peu plus sur votre propre comme vous en avez besoin.
Commençons donc par les sélecteurs CSS qui suivent le DOM.
Si vous vous souvenez du modèle d'objet de document
est la façon dont le navigateur divise votre page en une structure arborescente.
Ainsi, le navigateur sait réellement si un paragraphe vient directement après une
balise h1 ou si deux paragraphes sont des frères et sœurs dans la même section.
Nous allons l'utiliser pour styliser certaines parties de votre page.
Donc, les sélecteurs descendant sont une façon de dire, hey, si vous êtes à l'intérieur d'une balise de navigation,
je veux que vous stylisez tous les liens qui sont à l'intérieur de la balise de navigation.
Au lieu de les faire tous, juste ceux-là.
Si vous voulez être encore plus spécifique, vous pouvez utiliser les sélecteurs enfants.
Cette règle est très similaire, sauf qu'elle dit,
tous les liens a doivent être ce que nous appelons les descendants directs du lien nav.
Si vous avez un paragraphe et que vous avez des liens là-dedans, ignorez cela.
Ils doivent être directement sous l'autre.
Le dernier est un frère adjacent. Ce
n'est pas celui que j'utilise vraiment beaucoup dans mon propre codage, mais
je voulais vous dire ce que c'est parce qu'il y a vraiment de bonnes chances que
vous le verrez si vous regardez le code des autres personnes.
Comment fonctionne le frère adjacent est que les éléments doivent être
ce que nous appelons le même niveau et se suivre.
Donc, si vous avez une section qui a un h1
puis une liste ordonnée, ce seraient des frères et sœurs.
Si vous aviez un h1, puis d'autres choses et
que la liste ordonnée était à l'intérieur d'un paragraphe, cela ne fonctionnerait pas de cette façon.
Ensuite, nous allons parler de ce que nous appelons des sélecteurs d'identification.
sont utilisés pour identifier un seul élément dans le DOM.
La façon dont les identifiants fonctionnent est que vous allez entrer, et
vous, dans votre HTML, dites quelque chose le long des lignes d'id égal à l'en-tête, ou
id égal pied de page est celui qu'ils utilisaient beaucoup.
Ensuite, dans votre feuille de style, à l'aide du symbole de livre,
vous pouvez identifier ceux que vous souhaitez styliser.
Donc, en ce moment, il y a un petit mouvement, mais
il grandit un peu, pour sortir de l'utilisation de l'id de CSS.
Ils disent qu'il n'y a vraiment pas de raison d'utiliser cela parce que beaucoup
de gens utilisent vraiment cet identifiant pour JavaScript et des choses comme ça.
Mais encore une fois, c'est quelque chose que vous allez voir beaucoup, alors
je veux vous le présenter.
Donc, voyons un exemple très rapidement ici juste sur l'écran de comment cela fonctionne.
Dans mon HTML, j'allais de l'avant et mettais dans ma source, ma balise alt,
mais aussi id="MainLogo ».
Ensuite, dans ma feuille de style, en utilisant le symbole # avec le nom d'identifiant,
le navigateur va savoir, oh, quand je vois une de ces images,
je veux m'assurer d'ajouter cette bordure et cette marge. Les
sélecteurs de classe sont similaires aux ids, mais la différence est que les classes peuvent
s'appliquer à une plage d'éléments, pas seulement un élément particulier dans le DOM.
Alors, pensez aux images miniatures ou aux médias d'icônes sociales.
C' est cette idée que, tu sais quoi,
je veux être capable de coiffer un grand groupe de choses de la même manière,
mais je ne veux pas nécessairement les coiffer comme ça.
Vous ne voulez pas que toutes vos images soient des miniatures,
mais vous voulez qu'elles soient nombreuses.
Vous écririez ce code d'une manière très similaire.
Ici, dans mon HTML, j'ai class="thumb », class="thumb »,
class="thumb ».
Et dans mon CSS, au lieu d'utiliser le #, vous devez vous assurer d'utiliser le point ou le
point, avec le nom de la classe, et ensuite vous pouvez lui donner des règles.
Et de cette façon, la page va passer et savoir qu'en plus de
tout style que vous venez de mettre sur les images, vous voulez aussi ce style pour les vignettes.
Donc juste pour essayer de vous aider à le rendre un peu plus clair,
quelle est la différence entre l'utilisation de classes et d'identifiants ?
D' abord, tu veux t'assurer de connaître la syntaxe.
La période est pour les classes, et la livre est pour les identifiants.
Vous ne pouvez pas gâcher cela, car le navigateur ne le réparera pas pour
vous si vous mettez la mauvaise chose devant votre nom de classe ou d'identifiant.
Vous voulez vous rappeler que les classes peuvent être utilisées plusieurs fois.
Il est logique dans votre code HTML de voir class="thumb », class="thumb », class="thumb »,
class="thumb » parce que ce n'est pas censé être une partie spécifique de la page.
Avec les identifiants, il devrait être unique, vous ne devriez voir id égal,
par exemple, en-tête, que nous n'utilisons même pas une fois.
Vous ne devriez voir id="section principale » qu'une seule fois.
Alors encore une fois, pensons aux images et aux barres de navigation.
Il est très fréquent que vous vouliez formater de nombreuses images, mais
pas toutes les images de la même manière.
Et vous utiliseriez des classes pour cela.
Où vous pouvez utiliser un identifiant est, je suis sûr que vous avez été à certains endroits où sur
la page Web, vous voyez la barre de navigation, et
la page sur laquelle vous êtes actuellement est stylée légèrement différemment.
Et cela a du sens parce que vous ne pouvez être qu'à une page à la fois, et
c'est pourquoi vous pouvez choisir d'utiliser l'identifiant.
Donc, continuons et passons par un exemple rapide en utilisant cette barre de navigation.
Voici donc un exemple de fichier HTML,
où tout ce que j'ai fait est de mettre en quatre liens qui ne vont même pas vraiment nulle part.
J' ai commenté la feuille de style juste pour que
vous puissiez voir à quoi cela ressemblerait sans aucun style.
Vous pouvez voir, j'ai ma maison, intérêts, CV, loisirs, et
j'ai un lien supplémentaire ici que j'ai très mal appelé ici.
Alors continuons et
essayons d'ajouter un peu de style en utilisant ces sélecteurs avancés.
Va par ici.
Vous pouvez voir que j'ai utilisé l'élément enfant de, en fait,
juste une sorte de descendant de, hey, tous les liens qui sont dans la barre de navigation,
je veux styler différemment, je veux leur donner une couleur d'arrière-plan différente,
une largeur différente, des choses comme ça.
En outre, tout ce qui est courant de classe, je veux faire même différent de
tout autre lien ou quoi que ce soit d'autre que nous avons vu de cette façon.
Alors allons de l'avant et décommenter la feuille de style.
Sauvez-le.
Passez de ça à ça.
Vous pouvez voir que seuls les liens qui se trouvent à l'intérieur de ma barre de navigation sont stylés.
Celle-ci a été laissée la même.
Et celui où j'ai class="current » semble différent des autres.
Donc, il est vraiment simple d'utiliser ces choses, vous avez juste besoin de savoir à leur sujet.
Au fur et à mesure que vos pages deviennent plus avancées,
vous voudrez restreindre la portée de certaines règles.
On ne veut les appliquer qu'à certaines choses.
Et l'une des notations que vous pouvez utiliser pour cela est le point.
Donc, dans votre feuille de style, vous auriez réellement p.main.
Cela signifie aller et trouver tous les paragraphes qui utilisent le principal de classe.
Ou vous pourriez avoir en-tête img.special.
Cela signifierait trouver toutes les images qui ont l'image classique spécial
qui appartiennent dans l'en-tête.
C' est juste un moyen pour vous de vraiment réduire ce qui est stylé.
De même, vous pouvez également, ce que nous appelons, élargir la portée.
Donc, disons qu'il existe une sorte de style que vous voulez appliquer à
la fois à l'en-tête et au pied de page, ou aux sections et aux articles.
Pas un problème.
Ce que vous faites, c'est que vous écrivez simplement l'élément,
et vous incluez une virgule juste là pour le faire savoir.
Donc juste comme un examen rapide.
Et c'est quelque chose de beaucoup plus tôt.
Vous devez penser à ce qui se passe lorsqu'il existe plusieurs règles pour
le même sélecteur.
Donc, vous pourriez avoir celui-ci ici avec le paragraphe où il a certaines
qualités qu'il veut partager entre les paragraphes h1, l'id main, et
la classe spéciale.
Mais plus tard, si vous voulez avoir un style supplémentaire pour
un paragraphe, tant que vous le mettez quelque part en dessous,
il va remplacer et combiner avec tout ce qui est plus haut.
Donc, à moins qu'une règle ait le point d'exclamation important après, elle
utilise toujours le dernier qu'elle a vu, ainsi que les précédentes qui ne sont pas en conflit.
En plus des sélecteurs d'éléments et des différents sélecteurs de relations DOM,
nous en avons aussi quelques autres dont je veux parler brièvement.
Le premier est le sélecteur universel, qui est l'étoile ou
le Maj huit de votre clavier.
Ce que celui-ci fait est,
il appliquera votre style à chaque élément de la page.
C' est absolument fou.
Je ne vais pas le faire.
Je vais te laisser le faire, mais vas-y et mets une étoile, et puis le style,
peut-être la bordure, autour de chaque élément.
Cela affecte tout sur votre page.
Parfois, c'est sympa pour le débogage.
Le suivant que vous pourriez penser à utiliser sont ce que nous appelons des
sélecteurs d'attributs.
Au lieu d'aller sur les balises, vous allez sur les attributs qui vont à l'intérieur des balises.
Donc, dans ce cas, il irait de l'avant et il voudrait styliser chaque lien où vous
avez href="info.html », et je vais faire un exemple rapide de cela en seulement une seconde.
Mais avant de le faire, je voulais en mentionner deux autres que nous regarderons plus tard,
qui sont des pseudo-classes et des pseudo-éléments.
Juste un autre niveau de distinguer certaines choses que vous voulez styler
sur votre page.
Mais d'abord, allons de l'avant et regardons l'utilisation de ces sélecteurs d'attributs.
Donc, la façon dont les sélecteurs d'attributs fonctionnent est qu'ils recherchent dans le DOM des
éléments qui ont l'attribut que vous recherchez.
Donc, par exemple, vous pourriez vouloir regarder toutes les images qui utilisent des fichiers gif ou
toutes les images qui ont un texte alt vide ou peut-être
tous les liens qui vont vers des sites gouvernementaux ou des sites à but non lucratif ou des sites éducatifs.
C' est vraiment facile pour nous de les trouver et d'aller de l'avant et de
les coiffer un peu différemment. La
façon dont nous faisons cela est que nous utilisons
des opérateurs pour faire correspondre les différentes parties du texte alt que vous recherchez.
Donc ici, dans ce qu'on appelle le caret, ça va correspondre au début.
Donc, dans ce cas, cela correspondrait à tous les liens qui commencent par http://umich, et
peu importe comment cela se termine.
Le prochain avec le signe du dollar va correspondre exactement à la fin.
Il va trouver tous les fichiers qui se terminent par .png.
Nous avons également le caractère générique, où vous allez et
dire que si vous voyez umich dans n'importe quelle partie de n'importe quelle hyper référence du tout, appliquez cette règle.
Donc, ce que nous allons regarder, c'est que nous allons regarder un fichier qui a des
liens différents et chacun a un type d'extension différent que nous voulons styles différemment.
D' accord.
Donc, ce que j'ai ici est juste une liste de liens. Il
n'y a pas de cours.
Rien de spécial à ce sujet, qui va à différents sites universitaires, organisations,
sites gouvernementaux, et si vous jetez un oeil, par défaut, il va juste apparaître comme
vos liens bleus traditionnels avec souligné, le texte juste là.
Mais ce que je veux faire, c'est que je veux entrer et dire,
vous savez quoi, tous ceux qui finissent par .org ?
Faites-leur une couleur.
Tous ceux qui sont .edu, une autre couleur, et
tous ceux qui se terminent par .gov, une troisième couleur.
Voyons à quoi ça ressemble.
Ici, vous pouvez voir que sans que je doive mettre des informations à l'intérieur des tags
eux-mêmes, le navigateur les a colorés la bonne couleur.
Ok, je viens de couvrir beaucoup de choses dans une très courte vidéo.
Tu dois réaliser que ces idées vont fusionner.
Vous allez utiliser des classes,
vous allez utiliser des identifiants, vous allez utiliser des attributs.
Et la chose importante que je veux que vous sachiez est que lorsque
vous ajoutez toutes ces choses ensemble, l'ordre dans lequel vous écrivez des classes et des
identifiants différents dans votre texte n'a pas d'importance.
Peu importe si vous avez spécial tôt sombre ou sombre début spécial.
Ce qui compte vraiment, c'est l'ordre dans lequel vous écrivez vos règles dans votre feuille de style.
Les navigateurs vont toujours commencer vers le haut et appliquer chaque règle.
Maintenant, la bonne nouvelle de cette conférence est que je veux que vous réalisiez
qu'avec la puissance des classes et des identifiants et cette feuille de style en cascade est
que cela signifie que vous pouvez utiliser des feuilles de style d'autres personnes pour styler votre code.
Et vous pouvez simplement ajouter une classe qui change le petit attribut
que vous n'avez peut-être pas aimé à ce sujet.
Vous pouvez remplacer ces feuilles de style et en faire la vôtre.
Assurez-vous simplement de lier votre feuille de style en dernier.
D' accord, on a beaucoup couvert, et
j'espère que je ne t'ai pas submergé avec la vidéo.
Je veux juste que vous vous souveniez que lorsque nous faisons des sélecteurs de type et
que le genre de choses que je vais vous faire faire dans cette classe est que nous
les ajoutons habituellement pour restreindre la portée de l'application des règles.
Donc on ne veut pas tout coiffer.
On veut seulement donner du style à certaines choses.
Un id est utilisé pour spécifier un élément spécifique dans une page, et
les classes sont utilisées pour associer des éléments qui ont vraiment tendance à avoir le même aspect.
Alors en continuant, je sais que je vais avoir des exemples de code avec moi.
J' espère que vous allez arrêter, sortir votre ordinateur portable, et
vraiment coder avec moi pour avoir une idée de la puissance de ces différentes choses.
Merci.