Share
Nous avons créé un guide complet pour vous aider à apprendre le CSS, que vous soyez débutant avec les bases ou que vous souhaitiez explorer un CSS plus avancé..
Alors tu as appris la base identifiant, classe, et descendant sélecteurs - et ensuite appelé un jour? Si c'est le cas, vous passez à côté d'un énorme niveau de flexibilité. Bien que de nombreux sélecteurs mentionnés dans cet article fassent partie des spécifications CSS3 et ne soient par conséquent disponibles que dans les navigateurs modernes, vous vous devez de les mémoriser..
Et au fait, si vous rencontrez des problèmes avec votre CSS et souhaitez qu'un professionnel le vérifie et corrige les erreurs, vous pouvez trouver des pigistes qualifiés sur Envato Studio..
* marge: 0; rembourrage: 0;
Supprimons les plus évidents pour les débutants avant de passer aux sélecteurs plus avancés..
L'étoile ciblera chaque élément de la page. De nombreux développeurs utiliseront cette astuce pour réduire les margele sable rembourrage. Bien que cela convienne certainement pour des tests rapides, je vous conseillerais de ne jamais l'utiliser dans un code de production. Il ajoute trop poids sur le navigateur, et est inutile.
le * peut également être utilisé avec des sélecteurs enfants.
#container * border: 1px black solid;
Cela ciblera chaque élément qui est un enfant de la #récipient div. Encore une fois, essayez de ne pas trop utiliser cette technique, si jamais.
Voir la démo
#container width: 960px; marge: auto;
Le préfixe du symbole de hachage à un sélecteur nous permet de cibler par identifiant. C’est facilement l’utilisation la plus courante, mais soyez prudent lorsque vous utilisez identifiant sélecteurs.
Demandez-vous: dois-je absolument appliquer un
identifiantà cet élément afin de le cibler?
identifiant les sélecteurs sont rigides et ne permettent pas la réutilisation. Si possible, essayez d’abord d’utiliser un nom de tag, l’un des nouveaux éléments HTML5 ou même une pseudo-classe..
Voir la démo
.erreur couleur: rouge;
C'est un classe sélecteur. La différence entre identifiantle sable classees est que, avec ce dernier, vous pouvez cibler plusieurs éléments. Utilisation classees lorsque vous souhaitez que votre style s’applique à un groupe d’éléments. Sinon, utilisez identifiants trouver une aiguille dans une botte de foin et ne styler que cet élément spécifique.
Voir la démo
li a text-decoration: none;
Le sélecteur de commentaires le plus suivant est le descendant sélecteur. Lorsque vous avez besoin d’être plus précis avec vos sélecteurs, vous les utilisez. Par exemple, si plutôt que de cibler tout balises d'ancrage, vous avez seulement besoin de cibler les ancres qui sont dans une liste non ordonnée? C'est précisément quand vous utiliseriez un sélecteur de descendant.
Astuce - Si votre sélecteur ressemble à
X Y Z A B.error, vous le faites mal. Demandez-vous toujours s'il est absolument nécessaire d'appliquer tout cela. poids.
Voir la démo
a couleur: rouge; ul margin-left: 0;
Que faire si vous souhaitez cibler tous les éléments d’une page, en fonction de leur type, plutôt qu'un identifiant ou classeprénom? Restez simple et utilisez un sélecteur de type. Si vous devez cibler toutes les listes non ordonnées, utilisez ul .
Voir la démo
a: link color: red; a: visted color: purple;
Nous utilisons le :lien pseudo-classe pour cibler toutes les balises d'ancrage sur lesquelles l'utilisateur n'a pas encore cliqué.
Alternativement, nous avons aussi le :a visité pseudo-classe, qui, comme vous l’aviez prévu, nous permet d’appliquer un style spécifique uniquement aux balises d’ancrage de la page. avoir été cliqué sur, ou a visité.
Voir la démo
ul + p couleur: rouge;
Ceci est appelé un sélecteur adjacent. Il sélectionnera seulement l'élément immédiatement précédé de l'ancien. Dans ce cas, seul le premier paragraphe après chaque ul aura du texte rouge.
Voir la démo
div # conteneur> ul border: 1px solid black;
La différence entre le standard X Y et X> Y est que ce dernier ne sélectionnera que les enfants directs. Par exemple, considérons le balisage suivant.
- Élément de liste
- Enfant
- Élément de liste
- Élément de liste
- Élément de liste
Un sélecteur de #container> ul ne ciblera que le uls qui sont des enfants directs du div avec un identifiant de récipient. Il ne ciblera pas, par exemple, le ul c'est un enfant du premier li.
Pour cette raison, l'utilisation du combinateur d'enfants présente des avantages en termes de performances. En fait, il est recommandé en particulier lorsque vous travaillez avec des moteurs de sélecteur CSS basés sur JavaScript..
Voir la démo
ul ~ p couleur: rouge;
Ce combinateur de soeur est semblable à X + Y, Cependant, c'est moins strict. Alors qu’un sélecteur adjacent (ul + p) ne sélectionnera que le premier élément qui est immédiatement précédé de l'ancien sélecteur, celui-ci est plus généralisé. Il sélectionnera, en se référant à notre exemple ci-dessus, tout p éléments, tant qu'ils suivent un ul.
Voir la démo
a [titre] couleur: vert;
Désigné comme un sélecteur d'attributs, dans notre exemple ci-dessus, cela ne sélectionnera que les balises d'ancrage qui ont un Titre attribut. Les étiquettes d'ancrage qui ne recevront pas ce style particulier. Mais, si vous avez besoin d'être plus précis? bien?
Voir la démo
a [href = "http://net.tutsplus.com"] color: # 1f6053; / * nettuts green * /
L’extrait ci-dessus dénomme toutes les balises d’ancre qui renvoient à http://net.tutsplus.com; ils recevront notre couleur verte de marque. Toutes les autres balises d'ancrage ne seront pas affectées.
Notez que nous encapsulons la valeur entre guillemets. N'oubliez pas de le faire également lorsque vous utilisez un moteur de sélecteur CSS CSS. Si possible, utilisez toujours les sélecteurs CSS3 par rapport aux méthodes non officielles.
Cela fonctionne bien, cependant, c'est un peu rigide. Et si le lien est bien dirigé vers Nettuts +, mais peut-être que le chemin est nettuts.com plutôt que l'URL complète? Dans ces cas, nous pouvons utiliser un peu de la syntaxe des expressions régulières.
Voir la démo
a [href * = "tuts"] color: # 1f6053; / * nettuts green * /
Nous y allons c'est ce dont nous avons besoin. L'étoile indique que la valeur précédente doit apparaître quelque part dans la valeur de l'attribut. De cette façon, cela couvre nettuts.com, net.tutsplus.com, et même tutsplus.com.
N'oubliez pas qu'il s'agit d'une déclaration large. Que faire si la balise d'ancrage est liée à un site non Envato avec la chaîne tuts dans l'URL? Lorsque vous devez être plus spécifique, utilisez ^ et $, faire référence au début et à la fin d'une chaîne, respectivement.
Voir la démo
a [href ^ = "http"] background: url (chemin / vers / external / icon.png) no-repeat; padding-left: 10px;
Vous êtes-vous déjà demandé comment certains sites Web peuvent afficher une petite icône à côté des liens externes? Je suis sûr que vous avez déjà vu cela auparavant. ils rappellent gentiment que le lien vous dirigera vers un site Web totalement différent.
Ceci est un jeu d'enfant avec le symbole carat. Il est le plus souvent utilisé dans les expressions régulières pour désigner le début d'une chaîne. Si nous voulons cibler toutes les balises d'ancrage qui ont un href qui commence par http, nous pourrions utiliser un sélecteur similaire à l'extrait illustré ci-dessus.
Notez que nous ne cherchons pas
http: //; c'est inutile, et ne compte pas pour les URL commençant parhttps: //.
Maintenant, si nous voulions à la place styler toutes les ancres qui renvoient, par exemple, à une photo? Dans ces cas, recherchons le fin de la ficelle.
Voir la démo
a [href $ = ". jpg"] color: red;
Encore une fois, nous utilisons un symbole d'expressions régulières, $, se référer à la fin d'une chaîne. Dans ce cas, nous recherchons toutes les ancres qui sont liées à une image - ou au moins une URL qui se termine par .jpg. Gardez à l'esprit que cela ne fonctionnera certainement pas pour gifs et pngs.
Voir la démo
a [data-filetype = "image"] color: red;
Reportez-vous au numéro huit; Comment compensons-nous tous les différents types d'images: png, jpeg,jpg, gif? Eh bien, nous pourrions créer plusieurs sélecteurs, tels que:
un [href $ = ". jpg"], un [href $ = ". jpeg"], un [href $ = ". png"], un [href $ = ". gif"] couleur: rouge;
Mais, c'est une douleur dans le dos, et est inefficace. Une autre solution possible consiste à utiliser des attributs personnalisés. Et si nous ajoutions notre propre type de fichier attribuer à chaque ancre qui est liée à une image?
Lien d'image
Ensuite, avec ça crochet à la place, nous pouvons utiliser un sélecteur d'attributs standard pour ne cibler que les ancres.
a [data-filetype = "image"] color: red;
Voir la démo
a [data-info ~ = "external"] color: red; a [data-info ~ = "image"] border: 1px solid black;
En voici une spéciale qui impressionnera vos amis. Peu de gens connaissent cette astuce. Le tilda (~) le symbole nous permet de cibler un attribut ayant une liste de valeurs séparées par des espaces.
En allant avec notre attribut personnalisé à partir du numéro quinze, ci-dessus, nous pourrions créer un données-info attribut, qui peut recevoir une liste de tout ce que nous devons noter, séparés par des espaces. Dans ce cas, nous prendrons note des liens externes et des liens vers des images - juste pour l'exemple.
"Cliquez moi, imbécile
Avec cette balise en place, nous pouvons maintenant cibler toutes les balises qui ont l'une ou l'autre de ces valeurs, en utilisant l'astuce de sélection d'attributs ~.
/ * Attr cible data-info contenant la valeur "external" * / a [data-info ~ = "external"] color: red; / * Et qui contiennent la valeur "image" * / a [data-info ~ = "image"] border: 1px solid black;
Assez chouette, ay?
Voir la démo
entrée [type = radio]: cochée bordure: 1px noir solide;
Cette pseudo-classe ne ciblera qu'un élément d'interface utilisateur qui a été vérifié - comme un bouton radio ou une case à cocher. C'est aussi simple que ça.
Voir la démo
le avant et après les pseudo-classes donnent un coup de pied. Il semble que chaque jour, les gens trouvent des moyens nouveaux et créatifs de les utiliser efficacement. Ils génèrent simplement du contenu autour de l'élément sélectionné.
Beaucoup ont été initiés à ces classes quand ils ont rencontré le hack de correction.
.clearfix: after content: ""; bloc de visualisation; clarifier les deux; visibilité: cachée; taille de police: 0; hauteur: 0; .clearfix * display: inline-block; _Hauteur: 1%;
Ce pirater utilise le :après pseudo-classe pour ajouter un espace après l'élément, puis effacez-le. C’est un excellent truc à avoir dans votre sac à outils, surtout dans les cas où le débordement caché; méthode n'est pas possible.
Pour une autre utilisation créative de ceci, reportez-vous à mon conseil rapide sur la création d'ombres.
Selon la spécification CSS3 Selectors, vous devez utiliser techniquement la syntaxe de pseudo-élément de deux points.
::. Cependant, pour rester compatible, l'agent utilisateur acceptera également une utilisation par deux-points. En fait, à ce stade, il est plus judicieux d’utiliser la version à colon unique dans vos projets..
div: hover background: # e3e3e3;
Oh allez. Vous connaissez celui-ci. Le terme officiel pour cela est pseudo classe d'action utilisateur. Cela semble déroutant, mais ce n'est vraiment pas le cas. Vous souhaitez appliquer un style spécifique lorsqu'un utilisateur survole un élément? Cela fera le travail!
N'oubliez pas que l'ancienne version d'Internet Explorer ne répond pas lorsque le
:flotterla pseudo-classe est appliquée à autre chose qu'une balise d'ancrage.
Vous utiliserez le plus souvent ce sélecteur pour appliquer, par exemple, un bas de la bordure pour ancrer les tags, lorsque survolé.
a: hover border-bottom: 1px noir solide;
Astuce -
bord inférieur: 1px noir uni;semble mieux quetexte-décoration: souligné;.
div: not (#container) color: blue;
le négation pseudo-classe est particulièrement utile. Disons que je veux sélectionner tous les divs, sauf celui qui a un identifiant de récipient. L'extrait ci-dessus se chargera parfaitement de cette tâche.
Ou, si je voulais sélectionner chaque élément (non conseillé) à l'exception des balises de paragraphe, nous pourrions faire:
*: pas (p) couleur: vert;
Voir la démo
p :: première ligne font-weight: bold; taille de police: 1.2em;
On peut utiliser des pseudo-éléments (désignés par ::) pour styler des fragments d’un élément, tels que la première ligne ou la première lettre. Gardez à l’esprit que ceux-ci doivent être appliqués aux éléments de niveau bloc afin de prendre effet..
Un pseudo-élément est composé de deux points:
::
p :: première lettre float: left; taille de police: 2em; poids de police: gras; famille de polices: cursive; padding-right: 2px;
Cet extrait est une abstraction qui trouvera tous les paragraphes de la page, puis ne ciblera que la première lettre de cet élément..
Ceci est le plus souvent utilisé pour créer un style journalistique pour la première lettre d'un article.
p :: première ligne font-weight: bold; taille de police: 1.2em;
De même, le ::Première ligne comme prévu, le pseudo-élément n'appellera que la première ligne de l'élément.
"Pour assurer la compatibilité avec les feuilles de style existantes, les agents utilisateurs doivent également accepter la précédente notation en un point pour les pseudo-éléments introduits dans les niveaux CSS 1 et 2 (à savoir,: première ligne,: première lettre,: before et: after). Cette compatibilité n'est pas autorisée pour les nouveaux pseudo-éléments introduits dans cette spécification. " - La source
Voir la démo
li: nième enfant (3) couleur: rouge;
Vous vous souvenez des jours où nous n'avions aucun moyen de cibler des éléments spécifiques dans une pile? le nième enfant pseudo classe résout ça!
S'il vous plaît noter que nième enfant accepte un entier en tant que paramètre, toutefois, ce n'est pas basé sur zéro. Si vous souhaitez cibler le deuxième élément de la liste, utilisez li: nième enfant (2).
Nous pouvons même l'utiliser pour sélectionner un ensemble variable d'enfants. Par exemple, nous pourrions faire li: nième enfant (4n) sélectionner chaque quatrième élément de la liste.
Voir la démo
li: nth-last-child (2) couleur: rouge;
Et si vous aviez une liste énorme d'articles dans un ul, et seulement besoin d'accéder, par exemple, le troisième au dernier article? Plutôt que de faire li: nième enfant (397), vous pourriez plutôt utiliser le nième-dernier-enfant pseudo classe.
Cette technique fonctionne presque à l'identique à partir du numéro 16 ci-dessus, cependant, la différence est qu'elle commence à la fin de la collection et qu'elle revient.
Voir la démo
ul: nième de type (3) bordure: 1px noir uni;
Il y aura des moments où, plutôt que de choisir un enfant, vous devez plutôt sélectionner en fonction de la type d'élément.
Imaginez une balise contenant cinq listes non ordonnées. Si tu voulais coiffer seulement le troisième ul, et n'a pas eu un unique identifiant pour accrocher, vous pouvez utiliser le nième de type (n) pseudo classe. Dans l'extrait ci-dessus, seul le troisième ul aura une bordure autour.
Voir la démo
ul: dernier-dernier-type (3) bordure: 1px noir uni;
Et oui, pour rester cohérent, nous pouvons également utiliser nième-dernier-type pour commencer à la fin de la liste des sélecteurs, et revenir en arrière pour cibler l'élément souhaité.
ul li: premier enfant border-top: none;
Cette pseudo classe structurelle nous permet de ne cibler que le premier enfant du parent de l'élément. Vous l'utiliserez souvent pour supprimer les bordures des premier et dernier éléments de la liste..
Par exemple, supposons que vous ayez une liste de lignes et que chacune d’elles ait un bordure supérieure et un bas de la bordure. Eh bien, avec cet arrangement, le premier et dernier élément de cet ensemble aura l'air un peu étrange.
De nombreux designers appliquent des classes de premier et dernier pour compenser cela. Au lieu de cela, vous pouvez utiliser ces pseudo-classes.
Voir la démo
ul> li: last-child couleur: vert;
L'opposé de premier enfant, dernier enfant ciblera le dernier élément du parent de l'élément.
Construisons un exemple simple pour illustrer une utilisation possible de ces classes. Nous allons créer un élément de liste de style.
Rien de spécial ici; juste une simple liste.
ul width: 200px; arrière-plan: # 292929; Couleur blanche; style de liste: aucun; rembourrage à gauche: 0; li padding: 10px; bord inférieur: 1px noir uni; bordure supérieure: solide 1px # 3c3c3c;
Ce style définira un arrière-plan, supprimez le remplissage par défaut du navigateur sur le ul, et appliquer des frontières à chaque li donner un peu de profondeur.
Pour ajouter de la profondeur à vos listes, appliquez un
bas de la bordurepour chaquelic'est une nuance ou deux plus sombre que lelila couleur de fond de. Ensuite, appliquez unbordure supérieurequi est un couple nuances plus léger.
Comme le montre l’image ci-dessus, le seul problème est qu’une bordure s’appliquera tout en haut et en bas de la liste non ordonnée - ce qui est étrange. Utilisons le :premier enfant et :dernier enfant pseudo-classes pour résoudre ce problème.
li: premier-enfant border-top: none; li: last-child border-bottom: none;
Nous y allons cela le fixe!
Voir la démo
Oui - IE8 pris en charge :premier enfant, mais non :dernier enfant. Allez comprendre.
div p: enfant seulement couleur: rouge;
En vérité, vous ne serez probablement pas en train d'utiliser le fils unique pseudo classe trop souvent. Néanmoins, il est disponible, si vous en avez besoin.
Il vous permet de cibler des éléments qui sont la seulement enfant de son parent. Par exemple, en référence à l'extrait de code ci-dessus, seul le paragraphe qui est le seul enfant de l'élément div sera coloré, rouge.
Supposons le balisage suivant.
Mon paragraphe ici.
Deux paragraphes au total.
Deux paragraphes au total.
Dans ce cas, le second divLes paragraphes de ne seront pas ciblés; seulement le premier div. Dès que vous appliquez plus d’un enfant à un élément, le fils unique la pseudo classe cesse de prendre effet.
Voir la démo
li: only-of-type font-weight: bold;
Cette pseudo-classe structurelle peut être utilisée de manière intelligente. Il ciblera les éléments qui n'ont pas de frères et soeurs dans son conteneur parent. Par exemple, ciblons tous uls, qui n'a qu'un seul élément de liste.
Tout d'abord, demandez-vous comment vous accomplissez cette tâche? Vous pourriez faire ul li, mais cela ciblerait tout liste des éléments. La seule solution est d'utiliser seulement de type.
ul> li: seulement-de-type font-weight: gras;
Voir la démo
le premier de type La pseudo-classe vous permet de sélectionner le premier frère de ce type.
Pour mieux comprendre cela, passons un test. Copiez le balisage suivant dans votre éditeur de code:
Mon paragraphe ici.
- Élément de liste 1
- Élément de liste 2
- Élément de liste 3
- Élément de liste 4
Maintenant, sans lire plus loin, essayez de comprendre comment cibler uniquement "Élément de liste 2". Lorsque vous avez compris (ou abandonné), lisez la suite.
Il existe différentes manières de résoudre ce test. Nous allons examiner une poignée d'entre eux. Commençons par utiliser premier de type.
ul: premier-de-type> li: n-enfant (2) poids de police: gras;
Cet extrait indique essentiellement: "recherchez la première liste non ordonnée sur la page, puis recherchez uniquement les enfants immédiats, qui sont des éléments de liste. Ensuite, filtrez-le uniquement du deuxième élément de liste de cet ensemble..
Une autre option consiste à utiliser le sélecteur adjacent.
p + ul li: dernier enfant font-weight: gras;
Dans ce scénario, nous trouvons le ul qui procède immédiatement à la p tag, puis trouve le tout dernier enfant de l'élément.
Nous pouvons être aussi odieux ou aussi enjoué que nous le voulons avec ces sélecteurs.
ul: premier-de-type li: dernier-dernier-enfant (1) nombre-de-polices: gras;
Cette fois, nous saisissons le premier ul sur la page, puis trouvez le tout premier élément de la liste, mais en partant du bas! :)
Voir la démo
Si vous compensez les anciens navigateurs, tels qu'Internet Explorer 6, vous devez rester prudent lorsque vous utilisez ces nouveaux sélecteurs. Mais, s'il vous plaît, ne laissez pas cela vous empêcher de les apprendre. Vous vous rendriez un très mauvais service. Assurez-vous de vous référer ici à une liste de compatibilité de navigateur. Alternativement, vous pouvez utiliser l'excellent script IE9.js de Dean Edward pour apporter la prise en charge de ces sélecteurs aux navigateurs plus anciens..
Deuxièmement, lorsque vous travaillez avec des bibliothèques JavaScript, comme le populaire jQuery, essayez toujours d'utiliser ces sélecteurs CSS3 natifs sur les méthodes / sélecteurs personnalisés de la bibliothèque, lorsque cela est possible. Cela rendra votre code plus rapide, car le moteur de sélecteur peut utiliser l'analyse native du navigateur, plutôt que le sien..
C'est bien de passer du temps à apprendre les bases de la conception Web, mais si vous avez besoin d'une solution rapide, l'un de nos modèles CSS prêts à l'emploi pourrait être une bonne option. Nous avons également quelques éléments CSS de qualité supérieure à prendre en compte:
Voici une poignée d’articles de code CSS prêts à l’emploi que vous trouverez utiles sur Envato Market..
Ce menu déroulant est une solution flexible et facile à intégrer pour créer vos menus personnalisés. La liste déroulante repose uniquement sur CSS / XHTML et est fournie avec un formulaire de contact entièrement fonctionnel..
Menu déroulant Mega CSS3CSS3 Responsive Web Tarification Tables Grids est un pack de tables de tarification 100% CSS3, responsive et retina ready. Le modèle est livré avec 2 styles de tableau, 20 peaux de couleur prédéfinies, états de survol animés, possibilité de définir une ou plusieurs colonnes comme actives (surgies) par défaut, rubans CSS3, info-bulles CSS3, 20 icônes de type police basées sur la police.
Cette version est dédiée à tout site basé sur un CMS personnalisé ainsi qu’à un site non-CMS et fonctionne avec des sites Web HTML ou PHP simples..
Grilles des tableaux de tarification Web réactifs CSS3L'info-bulle est un gentleman moderne et élégant qui apparaît à l'heure du spectacle. Ses caractéristiques comprennent:
L'info-bulleMegaNavbar est un composant de navigation purement HTML5 / CSS3 qui utilise le balisage de barre de navigation standard et les classes de système de grille fluide de Bootstrap 3. Il fonctionne pour les présentations fixes et réactives et a la possibilité d’inclure d’autres composants Bootstrap. MegaNavbar est compatible avec les appareils mobiles et les navigateurs Web modernes.
MegaNavbar (v 2.2.0). Advanced Mega Menu pour Bootstrap 3.0+Ce pack de tables de tarification CSS3 est une solution complète p
Accentsconagua