Dans cette vidéo, nous allons examiner une solution à l'ensemble de problèmes CSSA sélecteurs.
Et je vais juste aller sur tous les problèmes de haut en bas.
Alors n'hésitez pas à avancer rapidement s'il ya juste un ou deux que vous avez eu des problèmes avec.
Donc nous avons fait le premier ensemble dans la vidéo initiale donner à l'élément du corps un fond de cette couleur.
Donc nous disons simplement que le fond du corps est cette couleur pour nous.
Allons-y et le charger dans l'actualisation du navigateur et vous pouvez voir que nous obtenons un fond gris.
Donc la prochaine est de faire le H un élément de cette couleur.
Donc, même chose, sauf plutôt que de fond que nous venons de dire coloré.
Nous sauvons inhérents ou H-1 il devient violet.
Rappelez-vous si nous avions plus d'un H-1 sur la page, ils seraient tous pourpre.
Donc ce suivant est de rendre tous les éléments H-2 orange.
Exactement le même sélecteur que les deux ci-dessus.
Et puis pour le rendre orange, je vais juste utiliser le construit en couleur orange, mais vous pouvez utiliser n'importe quel autre système de couleur et vous pouvez voir que nous obtenons tous les âges à ces quatre d'entre eux.
Ils deviennent orange.
Donc, tout à l'heure, nous allons déplacer ce côté vers le haut pour rendre tous les éléments alliés bleus.
Choisissez votre propre bleu hexadécimal.
Donc, pour ce faire, nous sélectionnons tous les alliés, puis nous leur donnons une couleur et nous allons faire un bleu hexadécimal.
Donc vous pouvez mettre n'importe quoi ici aussi longtemps que c'est plus bleu que toute autre chose.
Rappelez-vous donc que le premier canal est rouge alors les deux suivants sont verts.
Donc, nous allons faire un peu de vert faire et puis un bouquet de bleu.
Sauvez cela et jetons un coup d'oeil aux alliés et vous pouvez voir que nous obtenons des lumières bleues.
Maintenant, changez l'arrière-plan de chaque paragraphe pour qu'il soit jaune.
C'est juste un de plus où nous sélectionnons chaque élément d'un type.
Donc, tous les paragraphes de fond jaune sauver et nous obtenons un tas de paragraphes jaunes.
Ensuite sélectionnez toutes les entrées et leur donner une bordure rouge de trois pixels.
Donc, la frontière d'entrée et il ya quelques façons de le faire, nous pouvons le faire tout à la fois.
Commandez trois pixels rouges solides et vous pouvez voir nos deux entrées ont un préfixe ou une bordure rouge solide ou nous pourrions faire cette frontière séparément frontière rouge avec trois pixels et enfin le style de bordure est solide pour des raisons assez évidentes.
C'est beaucoup plus facile de le faire.
Mais parfois vous aurez envie de le faire quand vous arrivez à javascript.
Nous allons simplement mettre à jour une partie.
Donc, quand un utilisateur survole quelque chose que vous voulez le changer d'une bordure rouge à une bordure verte.
Eh bien, nous pourrions simplement vouloir changer la couleur et nous pouvons laisser le dans le style comment ils sont.
Je vais donc laisser ça comme ça.
Ensuite, nous passons maintenant au sélecteur de classe.
Alors donnez tout avec la classe Hello.
Un fond blanc.
Et si nous regardons le h t m l il ya effectivement une seule chose.
Ce premier paragraphe dans cette div avec la classe.
Bonjour.
Nous sélectionnons donc ce point de classe.
Bonjour fond blanc.
Et vous pouvez voir que nous obtenons ce paragraphe ici.
Il devient blanc.
Ensuite, donnez à l'élément avec ID spécial une bordure bleue pleine de deux pixels.
Choisissez votre propre R.G. Être bleu.
La même chose encore cette fois au lieu d'un point, nous utilisons le signe de hachage ou l'arc de Thorpe et puis le nom de l'ID qu'elle peut voir à nouveau est ici Id especial.
Et puis nous voulons lui donner une bordure solide de deux pixels afin de pixel solide et puis R.G. Être bleu.
Et donc aura 0 rouge 100 vert 200 bleu et si nous sommes frais que vous pouvez voir, nous obtenons c'est assez léger, mais une frontière bleue 2 pixels autour de ce paragraphe avec l'ID.
Ensuite, faites tous les paragraphes qui sont imbriqués à l'intérieur de divs 25 pixels de police et l'indice est d'utiliser cette police de propriété Dasch taille 25 pixels.
Donc, ce que nous devons faire ici est plutôt que de sélectionner tous les paragraphes que nous voulons seulement les paragraphes qui sont à l'intérieur d'une div pour que vous puissiez voir il ya certains comme celui-ci ici qui n'est pas dans une div.
Nous ne voulons pas que ce soit 25 pixels en taille de police.
Donc, nous utilisons ce sélecteur de descendants où nous disons div et puis à l'intérieur de cette div tous les paragraphes afin que les paragraphes qui vivent dans n'importe quelle div n'a pas d'importance qui div tout les paragraphes de n'importe quel divs les sélectionner et leur donner la taille de la police 25 pixels sauf que rafraîchir Et vous pouvez voir que tous ceux-ci deviennent plus gros, mais ceux-ci qui disent paragraphe non à l'intérieur d'une div n'obtenez pas plus grand parce qu'ils ne sont pas au lieu d'une div Next up faire uniquement les entrées avec le texte de type ont un fond gris.
Il s'agit donc d'un autre type de sélecteur et basé sur un attribut.
Donc l'attribut que vous voulez faire est de trouver où le type est égal au texte.
Donc, fondamentalement, juste cette entrée ici le type est égal au texte.
Et ainsi la manière que nous faisons que nous allons saisir l'entrée et puis accolades carrées et yep accolades carrées.
Et puis à l'intérieur de là l'attribut qui est le type et nous cherchons où il est égal au texte et puis nous allons simplement dire le fond gris.
Et puis si nous défilons vers le bas ici et régénérer garder votre oeil ici vous pouvez voir que nous obtenons un fond gris.
Donc, encore une fois, c'est utile si vous voulez qu'il sélectionne tous les liens qui sont allés à Google.
Nous choisirions basés à partir de H.F. ou nous pourrions sélectionner hors de tout autre attribut là-bas.
Donc, à côté de donner deux paragraphes à l'intérieur de la troisième div un fond rose.
Donc, celui-ci devient un peu fou.
Alors, jetez un oeil à l'HMO.
Voici notre troisième div ..
Le premier est ici.
Le deuxième est ici et le troisième est ici et il ya deux paragraphes et nous voulons les sélectionner tous les deux et leur donner un fond rose.
Donc ce que nous avons fait avant était de sélectionner tous les paragraphes à l'intérieur de tous les divs qui ne fonctionneront pas ici.
Ce que nous faisons ce que nous voulons faire est de sélectionner tous les paragraphes à l'intérieur de la troisième div sur la page.
Et la façon dont nous pouvons spécifier la troisième div est d'utiliser fin de type.
Donc nous dirons div et de type 3.
Donc, cela va nous donner un troisième div et puis au lieu de cela tous les paragraphes et puis nous allons simplement dire que l'arrière-plan est rose et enregistrer rafraîchir et nous allons vérifier.
Voici notre première div.
Voici la seconde div.
Et voici le troisième div.
Commencer à commencer le paragraphe avec cardigan et je suis le deuxième paragraphe.
Là nous allons cardigan.
Je suis le deuxième paragraphe.
Ensuite, donner ce deuxième paragraphe à l'intérieur de la troisième div une bordure de bordure de cinq pixels de bordure.
Donc, celui-ci est très similaire, sauf que nous voulons seulement le deuxième paragraphe à l'intérieur de la troisième div.
Donc juste celui-ci.
Donc nous faisons la même chose où nous sélectionnons le troisième div et de type 3 et puis plutôt que tous les paragraphes que nous allons faire ensuite paragraphe et de type.
Et nous voulons la deuxième pour que nous puissions les combiner.
Ceci va sélectionner le deuxième paragraphe au lieu de la troisième div et nous voulons lui donner une bordure blanche 5 pixels bordure 5 pixels blanc solide.
Voilà.
Voici notre bordure blanche pleine de cinq pixels sur le deuxième paragraphe dans la div.
Pas le premier.
Ensuite, faites la E-M dans le troisième élément div blanc et 20 pixels de police.
C'est donc cette E-M ici skateboard cronut.
Si vous ne connaissez pas Krown, c'est très délicieux.
Peut-être surfaite.
Certainement trop cher pâtisserie de New York.
Il a un beignet et un croissant.
Donc, certainement à la maison au lieu du vocabulaire ipsum hipster ici.
Et nous allons prendre ce E-M et nous allons le rendre blanc et 20 pixel Swan.
Ainsi, tout comme avant, nous devions sélectionner le troisième div 3 et ensuite l'E-M à l'intérieur.
Et cela va sélectionner tous les IEMs et il arrive simplement qu'il n'y en a qu'un.
Mais s'il y avait plus d'un, nous pourrions vouloir dire E-M d'abord de type ou E-M au lieu d'un paragraphe, mais je vais juste le laisser comme cela pour l'instant.
Et nous voulons lui donner blanc à la couleur et 20 pixels couleur police blanc et la taille de la police 20 pixels.
Et juste pour vous rappeler que nous allons passer du temps à parler de polices et la taille de la police et un tas d'autres choses dans les futures vidéos.
Voilà.
Il est blanc et la taille de la police change.
Alors maintenant, nous sommes sur quelques-uns des exercices bonus qui sont certains de mes préférés.
Il y a certaines des manières les plus obscures de choisir les choses et de les manipuler.
Donc, pour commencer.
Regardons à faire toutes les cases cochées ont une marge gauche de 50 pixels et je vous l'ai donné.
Vous devez utiliser la marge gauche pour 50 pixels.
Il ya donc un sélecteur pour sélectionner les éléments qui sont vérifiés.
Et ça ressemble à ça.
C'est un pseudo-sélecteur comme nth de type.
Donc nous devons dire ce que nous recherchons qui a été vérifié.
Donc, je vais juste dire toutes les entrées qui ont été vérifiées parce que n'oubliez pas que les cases à cocher sont de type d'entrée égale case à cocher, il ya d'autres éléments qui peuvent être vérifiés si principalement le bouton radio.
Donc, ce serait également sélectionner les boutons radio qui ont été vérifiés et c'est très bien pour l'instant.
Donc, il semble que ce côlon d'entrée vérifié.
Et ce que nous voulons faire est d'utiliser la marge gauche cinquante pixels.
Il s'agit donc d'un petit aperçu de ce que nous allons voir dans certaines des vidéos futures quand nous ajouterons ceci et il va ajouter un espace sur le côté gauche de la case à cocher pour que vous puissiez voir ceux qui sont vérifiés déplacés.
Maintenant, si je vérifier celui-ci maintenant, il est coché et il se déplace sur la droite de 50 pixels.
Si je les décocher et revenir sur la gauche.
Donc, c'est vérifié.
Le prochain.
C'est probablement mon préféré.
Rendre tous les éléments d'étiquette en majuscules sans changer l'HMO.
Donc, j'ai mentionné que vous voudrez certainement regarder celui-ci et c'est parce que nous n'avons certainement pas dépassé cela.
Donc, pour commencer, nous allons simplement sélectionner tous les éléments d'étiquette et puis disons que je ne sais pas comment les faire en majuscules sans changer l'HMO.
Donc nous allons tirer sur Google et faire une recherche et c'est quelque chose que j'avais certainement fait avant.
Donc, nous allons monter et faire une recherche voir évaluer en majuscule, vous pouvez voir la première chose qui apparaît est la transformation du texte et le texte de transformation, il dit qu'il spécifie comment capitaliser dans les éléments de texte.
Il peut être utilisé pour faire apparaître le texte en majuscules ou en minuscules ou avec chaque mot en majuscule.
Donc, nous défilons vers le bas et jetez un oeil à la syntaxe et il semble que nous avons capitaliser.
Première lettre du capitaliste en majuscules et minuscules.
Nous voulons donc majuscules.
Ainsi, le texte transforme en majuscules.
Et ce que je viens de faire là-bas n'était pas seulement pour vous montrer quelque chose c'est en fait quelque chose que je fais tout le temps qui regarde les choses allant à Google tapant C Ss bla bla bla CSSA majuscules C S S transparente quoi que je cherche à faire.
Et je regarde juste les résultats de recherche parce qu'il ya tant de propriétés à rappeler.
Vous ne pouvez pas vous en souvenir tous.
C'est donc l'un des plus obscurs.
Absolument.
Et si nous rafraîchissons c'est pour les étiquettes qui sont ici.
Alors laissez-moi juste me débarrasser de cela juste pour vous montrer notre temps.
Ce sont les étiquettes.
Et puis nous ajoutons cela et rafraîchir leur casted supérieur.
Donc next up, nous avons faire la première lettre de l'élément avec l'ID verte spéciale et 100 pixels de taille de police.
Donc, pour cibler la première lettre qui est un autre que nous pourrions vouloir chercher SEUS nous première lettre et voir ce que nous obtenons.
Il semble donc qu'il y ait un autre pseudo-sélecteur.
La première lettre C Ss élément sélectionne la première lettre de la première ligne d'un bloc.
Donc, si vous prenez un coup d'oeil un exemple de première lettre.
Allons-y et essayez.
Nous voulons d'abord sélectionner l'ID spécial et ensuite la première lettre de celui-ci.
Et nous voulons le rendre vert et 100 pixels en taille de police de sorte que la couleur verte et la taille de police 100 pixels sauver et cet élément est ici.
Alors gardez un œil sur la première lettre que nous rafraîchissons et nous obtenons cet œil vert géant.
Ensuite, faites la couleur des éléments H-1 changé en bleu quand survolé.
Donc, celui-ci est en fait assez commun d'avoir une sorte d'effet.
Lorsque vous survoler quelque chose en général, il est assez subtile peut-être un bouton et vous planer dessus et il ya une petite ombre qui semble que la couleur se déplace très légèrement à ressembler à vous savez une sorte de perspective 3D pour quelque chose pour vous donner un peu Peu d'interactivité sans être distrait distrayant.
Nous allons donc sélectionner le H-1 et c'est effectivement tout.
Mais dans ce cas, il est seulement un et le pseudo-sélecteur est hover et tout ce que nous mettons ici n'est appliqué que quand un utilisateur plane sur l'élément.
Ainsi couleur bleu nous économisons.
Voici notre H-1.
Et si je me retourne bleu quand j'arrête de planer, il revient à ce qu'il avait avant.
Alors enfin faire les éléments qui ont été visités gris et comme il peut voir les deux éléments de ces deux liens en fait les deux liens vers Facebook qui sont des liens que j'ai visité avant.
C'est pourquoi ils sont violets Chrome par défaut fera tous visités pense violet.
Alors mettons un lien que je n'ai certainement pas été auparavant et il va juste faire quelque chose pour commencer et je vais vous montrer actualiser la page.
Il est maintenant bleu.
Parce que je n'y suis pas allé.
Alors laissons-le de cette façon pour le moment je ne vais pas cliquer dessus.
Et nous voulons que les visités soient pourpre plutôt que.
Je suis désolé, nous voulons que le visité une fois pour être gris plutôt que pourpre.
Ainsi, nous sélectionnons une étiquette des pseudo-sélecteurs appelés visités, puis nous allons le rendre grisé.
Et si nous rafraîchissons.
Gardez l'oeil sur celui-ci ici.
Je vais faire la police un peu plus grand.
Il est actuellement violet parce que j'ai été là avant que je rafraîchisse.
Maintenant, c'est génial.
OK, j'espère que vous avez apprécié cet exercice.
Il y a beaucoup à déballer là-bas.
Un grand nombre de sélecteurs différents.
Et une chose que j'ajouterai, c'est que pour chaque solution que j'ai ou presque chaque seul il ya au moins une ou deux autres façons d'atteindre le même résultat.
Donc, si vous aviez quelque chose qui différait de moi, mais il a toujours travaillé, c'est grand.
N'hésitez pas à ajouter dans les commentaires.
Partagez-le avec d'autres personnes.
C'est totalement valable.
C'est exactement ce que j'aurais fait.
Une autre chose.
Évidemment, le site n'est pas particulièrement attrayant.
Ce n'est pas un vrai site.
Nous allons travailler sur un projet réel très très bientôt dans la prochaine vidéo d'exercice.
Nous allons en fait faire un petit blog qui est un peu mieux conçu.
Il semble beaucoup plus agréable que cela.
C'est plus juste un exercice de pratique.