CSS3 module: W3C Selectors Résumé Les CSS (Cascading Style Sheets) sont un langage permettant de décrire la restitution de documents HTML et XML à l'écran, sur papier, vocalement, etc. Pour attacher des propriétés stylistiques aux éléments du document, elles utilisent les sélecteurs, qui sont des conditions de sélection de ces éléments. Statut de ce document Ce document est une version de travail de l'un des "modules" de la future spécification CSS3. Ce document est un document de travail du Groupe de Travail CSS & FP faisant partie de l'activité Style. Le Groupe de Travail pense que cette spécification est prête et souhaite donc en faire le dernier appel à commentaires. Les commentaires sur ce document de travail et les discussions le concernant peuvent être envoyés dans la liste de diffusion publique (archivée) www-style@w3.org (voyez les instructions). Ce document est toujours à l'état de document de travail et peut donc être mis à jour, remplacé ou rendu obsolète par d'autres documents du W3C à tout moment. 1.
Cascade CSS et priorité des sélecteurs CSS signifie « feuilles de styles en cascade »... Mais au fait, la cascade, qu’est-ce que c’est, à quoi ça sert, comment cela fonctionne ? Plongez avec nous dans la cascade sans risque de noyade ! Les styles CSS appliqués finalement à une page Web ont de multiples origines simultanées : styles utilisateurs et styles par défaut de l'agent utilisateur s'ajoutent aux différentes feuilles de styles éventuellement prévues par l'auteur, pour structurer ses CSS en modules, offrir des styles alternatifs ou styler ses documents pour différents medias. Les sources de style possibles Trois séries de styles CSS d'origines différentes sont susceptibles d'être concurrentes ou combinées pour un même élément (X)HTML : Les feuilles de style ont trois origines différentes : l'auteur, l'utilisateur et l'agent utilisateur (alias le navigateur). Prenons l'exemple des liens a d'un menu de navigation du type : <ul id="menu"><li><a href="..." Tout d'abord, une sélection en 3 étapes Etape 1 : le tri par media
Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8 Meet the Pseudo Class Selectors Pseudo class selectors are CSS selectors with a colon preceding them. You are probably very familiar with a few of them. Like hover: a:hover { } They are immensely useful in a variety of situations. Link-related pseudo class selectors :link – Perhaps the most confusion-causing link-related pseudo selector. :visited – Selects links that have already been visited by the current browser. :hover – When the mouse cursor rolls over a link, that link is in it’s hover state and this will select it. :active – Selects the link while it is being activated (being clicked on or otherwise activated). There is a fun technique to remember all the link pseudo class selectors. Input & link related pseudo class selectors :focus – Defining hover styles for links is great, but it doesn’t help out those who used keyboard navigation to get to the link. :target – The target pseudo class is used in conjunction with IDs, and match when the hash tag in the current URL matches that ID. Relational pseudo class selectors
Selectors Level 3 Abstract Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in an XML document. Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code. CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents on screen, on paper, in speech, etc. CSS uses Selectors for binding style properties to elements in the document. This document describes the selectors that already exist in CSS1 [CSS1] and CSS2 [CSS21], and further introduces new selectors for CSS3 and other languages that may need them. Selectors define the following function: expression ∗ element → boolean That is, given an element and a selector, this specification defines whether that element matches the selector. Status of this document This section describes the status of this document at the time of its publication. Table of Contents 1. 1.1. 1.2. 1.3. 2. 3. .
Les sélecteurs 5.1 La reconnaissance d'un motif En CSS, des règles de reconnaissance de motifs déterminent les règles de style qui s'appliquent aux éléments de l'arbre du document. Ces motifs, nommés sélecteurs, sont variés, allant du simple nom d'un élément jusqu'aux riches motifs contextuels. Quand toutes les conditions d'un motif sont vérifiées pour un élément donné, celui-ci est retenu par le sélecteur. Dans un sélecteur, la sensibilité à la casse d'un nom d'élément du document dépend du langage utilisé pour le document. Cette table résume la syntaxe du sélecteur de CSS2 : 5.2 La syntaxe des sélecteurs Un sélecteur simple est soit un sélecteur de type, soit un sélecteur universel immédiatement suivi par un sélecteur d'attribut, un sélecteur d'ID ou une pseudo-classes, zéro ou plusieurs de ceux-ci, dans n'importe quel ordre. sélecteur consiste en une succession d'un, ou plusieurs, sélecteurs simples, séparés par des combinateurs. combinateurs sont : les caractères blancs et les caractères ">" et "+". sujets
Les sélecteurs en CSS3 Chrome, Safari, Opera, Firefox 4, Internet Explorer 9 Voici un tableau sur la syntaxe des sélecteurs en CSS2 (référence W3C traduit sur yoyodesign : Les sélecteurs) : Les nouveautés incluent entre autres les sélecteurs d'attributs, le combinateur d'adjacence directe, les pseudo-classes et les pseudo-éléments. Il y a 3 nouveaux sélecteurs [attr^="stringValue"] Ce sélecteur permet de sélectionner un élément DOM dont l'attribut "attr" commence exactement par la valeur "stringValue". Exemple : <p class="example"> je n'ai pas d'attribut title</p><p class="example" title="comment"> j'ai un attribut title mais il ne commence pas par "ess"</p><p class="example" title="essai"> j'ai un attribut title commençant par "ess"</p><p class="example" title="esson"> j'ai un attribut title commençant par "ess" également</p> Démo [attr$="stringValue"] Ce sélecteur permet de sélectionner un élément DOM dont l'attribut "attr" finit exactement par la valeur "stringValue". Démo [attr*="stringValue"] Démo Démo :root Démo Démo
Le langage CSS/Les sélecteurs Un livre de Wikilivres. Nous avons vu qu'il est facile avec les CSS de changer le style de tous les éléments d'une page web, par exemple mettre en gras tous les titres de niveau 2. Néanmoins, il arrive souvent que le style d'un élément dépende de son contexte. Par exemple un titre de niveau 2 dans le texte de la page ne sera certainement pas mis en forme de la même manière qu'un titre de même niveau dans une section de menu latéral (comme le menu sur la gauche de cette page). Il faut donc un outil pour restreindre le champ d'application d'une règle CSS à une catégorie particulière d'un ou plusieurs élément(s) donné(s) : ce sont les sélecteurs CSS. Un sélecteur CSS est un mot-clef qui permet de désigner une catégorie d'éléments de la page éventuellement de nature différente ou une relation entre deux éléments. Il est possible d'utiliser autant de sélecteurs que nécessaire pour spécifier l'élément dont on veut changer le style. Sélecteurs généraux[modifier | modifier le wikicode] ou : <! <! <!
Sélecteurs CSS Les sélecteurs définissent les éléments sur lesquelles s'applique un ensemble de règles CSS. Les sélecteurs simples Les sélecteurs de type Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué. Les sélecteurs de classe Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attribut class. Les sélecteurs d'identifiant Ce sélecteur simple permet de cibler un élément d'un document en fonction de la valeur de son attribut id. Le sélecteur universel Ce sélecteur permet de cibler tous les nœuds d'un document. Les sélecteurs d'attribut Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs. Les combinateurs Les sélecteurs de voisin direct Le combinateur '+' permet de sélectionner les nœuds qui suivent immédiatement un élément donné. Les sélecteurs de voisins Le combinateur '~' permet de sélectionner les nœuds qui suivent un élément et qui ont le même parent. Les sélecteurs d'éléments fils
An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements Taming Advanced CSS Selectors