Share
Il est temps que nous commencions à apprendre un nouveau CSS, n'est-ce pas??
Nous sommes tous habitués aux nouvelles fonctionnalités introduites dans les frameworks, mais nous oublions souvent que de nouvelles fonctionnalités sont constamment développées dans les langages Web de base que nous utilisons quotidiennement..
Le brouillon CSS Selectors Level 4 du 15 janvier décrit un saut important dans les fonctionnalités pour CSS.
Avant de commencer, vous devez savoir que le code CSS que vous trouverez dans cet article ne fonctionnera généralement pas dans tous les navigateurs. Même le plus récent du nouveau. La raison en est que le projet est exactement cela-un projet. Il s'agit de la quatrième version du brouillon de sélecteurs de niveau 4, qui a débuté en 2011. Les sélecteurs suggérés dans le projet sont une spécification pour les nouveaux sélecteurs suggérés par les éditeurs du document lui-même, grâce à de nombreuses délibérations et collaborations avec personnes de la communauté qui participent à la liste de diffusion du W3C.
Qu'est-ce que cela signifie? Cela signifie que dans un avenir relativement proche, nous verrons probablement un grand nombre de ces fonctionnalités implémentées, et beaucoup seront fournies dans les versions de développement de navigateurs tels que Chrome et Firefox..
Regardons quelques-uns des nouveaux sélecteurs!
Nous avons vu le :ne pas sélecteur avant dans les sélecteurs de niveau 3. Cependant, le projet actuel du niveau 4 :ne pas le sélecteur permet plusieurs arguments avec une correspondance plus complexe.
Précédemment, :ne pas ne peut être utilisé qu'avec un seul sélecteur et ne peut pas être combiné. Par exemple, niveau 3 :ne pas pourrait ressembler à ceci:
a: not ([href * = "somesite.com"])
Cela choisirait toutes les balises d'ancrage qui n'avaient pas de href y compris la chaîne "somesite.com". Mais avec le nouveau projet, nous pouvons faire des choses plus intéressantes.
Nous couvrirons :a sous peu, mais pour l’instant, voici un sélecteur qui sélectionne tous les liens qui ne sont pas des descendants directs d’éléments de classe. col ou une classe qui commence avec col (comme les classes de grille de Bootstrap col-md-4). Il ignorera également les ancres qui ont des éléments img en tant que descendants..
a: non ([class | = "col"]> a,: a (img))
Ce sélecteur nous permet également de faire des choses comme:
div: not (div + div)
Ceci sélectionne tous les div qui ne sont pas les frères et soeurs en ligne d'autres div..
Avec l'ajout du : nième-dernier-enfant pseudo-classe nous pouvons aussi faire des choses comme ça:
div: not (.container> div: nth-last-child (-n + 2))
Ceci sélectionnerait tous les divs sauf ceux qui sont des descendants directs de .récipient éléments et sont les deux derniers frères et soeurs.
Comme vous pouvez le constater, ces règles peuvent devenir très puissantes et complexes. mais ajoutons encore plus de flexibilité dans le mix en introduisant le :a pseudo sélecteur.
le :a Le pseudo-sélecteur vous permet de sélectionner des éléments dont les arguments passés sont des enfants. Par exemple, pour sélectionner tous les liens d'ancrage contenant des éléments d'image en tant qu'enfants, utilisez la syntaxe suivante:
a: a (img)
toutefois, :a n'est pas limité à de simples sélecteurs. Vous pouvez combiner :a avec :ne pas et : nth- * sélecteurs pour créer des sélecteurs relationnels assez complexes.
Par exemple, sélectionnons table éléments qui ont plus de dix lignes:
table: has (tr: nth-de-type (11))
Que diriez-vous de choisir un corps élément dont le dernier élément enfant n'est pas un pied de page?
body: not (: has (footer: last-child))
Actuellement, nous pouvons cibler les hyperliens à l'aide de :lien et :a visité. Cela va plus loin que la simple utilisation du une sélecteur, car il vérifie la présence de href, et vérifie l'historique de navigation de l'utilisateur pour déterminer si un lien donné a été visité.
: lien,: visité couleur: bleu;
Avec les sélecteurs de niveau 4 proposés, nous pourrions styler tous les liens, visités ou non, en utilisant : n'importe quel lien. Le style ci-dessus est relativement équivalent à:
: n'importe quel lien color: blue;
Jusqu'au niveau 4 des sélecteurs, CSS a reçu une global portée. En d'autres termes, si vous ajoutez le CSS suivant:
div color: # 444;
tous les divs recevront le couleur: # 444 règle de style. (Cela suppose qu’aucun autre style concurrent n’est appliqué.) Les sélecteurs de niveau 4 permettent d’utiliser les feuilles de style et les balises de style. portée à un élément:
C'est en dehors de la portée.
Dans cet exemple, nous avons appliqué une étendue à une balise de style à l’intérieur du de côté élément. Les règles de cette balise de style ne s’appliqueront qu'aux descendants du styleL'élément parent de.
le :allumettes Le pseudo sélecteur nous permet de vérifier si un élément correspond à une liste d'éléments. Par exemple, si vous souhaitez cibler toutes les balises d'ancrage, de paragraphe et h2 d'un article, vous pouvez le faire comme suit:
article: correspondances (h2, a, p)
Ceci remplace la syntaxe précédemment beaucoup plus détaillée:
article a, article h2, article p
Remarque: À partir de cette version du brouillon, :allumettes() ne peut pas être utilisé avec :ne pas, :a, ou un autre imbriqué :allumettes.
Accentsconagua
>> Vous êtes probablement familier avec le caractère d'espace qui nous permet d'écrire des règles descendantes, telles que toutes les ancres à l'intérieur d'un div:
div a
Mais jusqu'à présent, nous n'avons pas vu de sélecteur de descendant explicite. Avec les sélecteurs de niveau 4, nous en avons un: >>.
Toutefois, notez que cela crée un caractère supplémentaire inutile dans votre code CSS, car vous pouvez obtenir le même effet avec un seul espace de caractère. Soyez donc prudent avec son utilisation. Vraisemblablement, il agit comme un pont entre le sélecteur immédiat d'enfants, >, et le sélecteur d'accès shadow-dom, >>>.
|| Ce sélecteur est un ajout bienvenu pour le style de table. Regardons quelques balises pour une table de base:
| ID | prénom | |
|---|---|---|
Le style des éléments groupés horizontalement (c.-à-d. Dans la même rangée) a toujours été relativement simple à réaliser. Éléments de style regroupés verticalement est un tout autre jeu de balle.
Afin de styler tous les éléments qui font partie de la colonne avec la classe personnel-info, nous pourrions ajouter plus de classes à la balise et les styler directement, ou, en regardant vers les sélecteurs de niveau 4, nous pourrions utiliser le || sélecteur. le || sélecteur vous permet de cibler proprement ceux td éléments comme suit:
.personnel-info || td
Ceci conclut notre aperçu de certaines des nouvelles fonctionnalités des sélecteurs de niveau 4! Ces nouveaux outils puissants, qui permettent d’économiser des octets, ne sont pas totalement verrouillés, mais les navigateurs commencent à les implémenter dans leurs premiers formulaires expérimentaux. Soyez donc à l’affût des mises à jour des spécifications. Bien sûr, quand ils seront formalisés, nous les couvrirons ici sur Tuts+!
Découvrez notre cours sur le CSS du futur, où Craig Campbell aborde, entre autres:
