les différents sélecteurs et les règles pour savoir...

ISN –

Web

-2

01

4-2

01

5

Les différents sélecteurs et les règles pour savoir résoudre les conflits lorsque des déclarations sont en concurrences.

ISN –

Web

-2

01

4-2

01

5

Philippe Renevier Gonin - CSS / Sélecteurs - formation ISN, 2014-2015 02 / 23

• Listes (comprenant CSS level 1, 2 et 3)

– http://www.w3.org/TR/selectors/#selectors

– Il existe déjà une spécification level 4, mais elle n’est pas implémentée

• Une liste de sélecteur est possible, en séparant ceux-ci par « , »

– Permet de ne pas ré-écrire des blocs de déclaration

– Potentiellement un usage de sélecteurs dans des sélecteurs (à partir du level 4)

Les sélecteurs Sélecteurs simples Pseudo éléménts Combinaison Règles de priorité Exercice

http://www.w3.org/TR/selectors/#selectors

ISN –

Web

-2

01

4-2

01

5


C Meaninglink &

name

First defined

in CSS level

* any element Universal selector 2

E an element of type E Type selector 1

E[foo] an E element with a "foo" attribute Attribute selectors 2

E[foo="bar"] an E element whose "foo" attribute value is exactly

equal to "bar"

Attribute selectors 2

E[foo~="bar"] an E element whose "foo" attribute value is a list of

whitespace-separated values, one of which is

exactly equal to "bar"


E[foo^="bar"] an E element whose "foo" attribute value begins

exactly with the string "bar"


E[foo$="bar"] an E element whose "foo" attribute value ends

exactly with the string "bar"


E[foo*="bar"] an E element whose "foo" attribute value contains

the substring "bar"


E[foo|="en"] an E element whose "foo" attribute has a hyphen-

separated list of values beginning (from the left) with

"en"


E:root an E element, root of the document Structural pseudo-classes 3

E:nth-child(n) an E element, the n-th child of its parent Structural pseudo-classes 3

E:nth-last-child(n) an E element, the n-th child of its parent, counting

from the last one

Structural pseudo-classes 3

E:nth-of-type(n) an E element, the n-th sibling of its type Structural pseudo-classes 3

E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting

from the last one


E:first-child an E element, first child of its parent Structural pseudo-classes 2


http://www.w3.org/TR/selectors/#universal-selector

http://www.w3.org/TR/selectors/#type-selectors

http://www.w3.org/TR/selectors/#attribute-selectors







http://www.w3.org/TR/selectors/#structural-pseudos






ISN –

Web

-2

01

4-2

01

5


C Meaninglink &

name

First defined

in CSS level

E:last-child an E element, last child of its parent Structural pseudo-classes 3

E:first-of-type an E element, first sibling of its type Structural pseudo-classes 3

E:last-of-type an E element, last sibling of its type Structural pseudo-classes 3

E:only-child an E element, only child of its parent Structural pseudo-classes 3

E:only-of-type an E element, only sibling of its type Structural pseudo-classes 3

E:empty an E element that has no children (including text

nodes)


E:link

E:visited

an E element being the source anchor of a hyperlink

of which the target is not yet visited (:link) or already

visited (:visited)

The link pseudo-classes 1

E:active

E:hover

E:focus

an E element during certain user actions The user action pseudo-classes 1 and 2

E:target an E element being the target of the referring URI The target pseudo-class 3

E:lang(fr) an element of type E in language "fr" (the document

language specifies how language is determined)

The :lang() pseudo-class 2

E:enabled

E:disabled

a user interface element E which is enabled or

disabled

The UI element states pseudo-classes 3

E:checked a user interface element E which is checked (for

instance a radio-button or checkbox)

The UI element states pseudo-classes 3








http://www.w3.org/TR/selectors/#link

http://www.w3.org/TR/selectors/#useraction-pseudos

http://www.w3.org/TR/selectors/#target-pseudo

http://www.w3.org/TR/selectors/#lang-pseudo

http://www.w3.org/TR/selectors/#UIstates

http://www.w3.org/TR/selectors/#UIstates

ISN –

Web

-2

01

4-2

01

5


C Meaninglink &

name

First defined

in CSS level

E::first-line the first formatted line of an E element The ::first-line pseudo-element 1

E::first-letter the first formatted letter of an E element The ::first-letter pseudo-element 1

E::before generated content before an E element The ::before pseudo-element 2

E::after generated content after an E element The ::after pseudo-element 2

E.warning an E element whose class is "warning" (the

document language specifies how class is

determined).

Class selectors 1

E#myid an E element with ID equal to "myid". ID selectors 1

E:not(s) an E element that does not match simple selector s Negation pseudo-class 3

E F an F element descendant of an E element Descendant combinator 1

E > F an F element child of an E element Child combinator 2

E + F an F element immediately preceded by an E

element

Adjacent sibling combinator 2

E ~ F an F element preceded by an E element General sibling combinator 3


http://www.w3.org/TR/selectors/#first-line

http://www.w3.org/TR/selectors/#descendant-combinators

http://www.w3.org/TR/selectors/#child-combinators

http://www.w3.org/TR/selectors/#adjacent-sibling-combinators

ISN –

Web

-2

01

4-2

01

5


• Définir un « namespace » par défaut (fait par les navigateurs)@namespace "http://www.w3.org/1999/xhtml"; /* c’est une “rule”, à mettre hors d’un bloc de déclaration */

• Définir un autre namespace : @namespace svg "http://www.w3.org/2000/svg";

• Utilisation ensuite : – svg|A : la balise A qui est dans le namespace svg– A : la balise A qui est dans l’espace de nom par défaut– *|A : la balise A dans n’importe quel espace de nom– |A : la balise A qui est dans aucun espace de nom

@namespace svg "http://www.w3.org/2000/svg";svg|circle { opacity: 0.5; }

<svg><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill=“blue" />

</svg>

http://dabblet.com/gist/16d091ea0af3dc3fe550


http://dabblet.com/gist/16d091ea0af3dc3fe550

ISN –

Web

-2

01

4-2

01

5


• Type selectorh1 { … } /* désigne tous les h1 du document */

• Universal selector* { … } /* désigne tous les éléments */

• Class selectorE.toto { … } /* désigne les E dont l’attribut class="toto" *//* équivalent à E[class~=toto] (c.f. suivant) */

• Id selectorE#aId { …} /* désigne le seul E dont l’attribut id="aId" */


ISN –

Web

-2

01

4-2

01

5


E[att] chaque E qui a un attribut att

E[att=val] chaque E qui a un attribut att qui vautval

E[att~=val] chaque E qui a un attribut att qui estune liste de mot contenant val

E[att|=val] chaque E qui a un attribut att qui vautval ou qui commence par “val-”


ISN –

Web

-2

01

4-2

01

5


E[att^=val] chaque E qui a un attribut att qui commence par val

E[att$=val] chaque E qui a un attribut att qui se terminepar val

E[att*=val] chaque E qui a un attribut att qui contient val

Note : [att] désigne tous les éléments qui ont un attribut att

http://dabblet.com/gist/ea7e09a9382bd31e96ac


http://dabblet.com/gist/ea7e09a9382bd31e96ac

ISN –

Web

-2

01

4-2

01

5


• élément:first-child– correspond au premier élément (celui-ci) enfant d'un autre élément.– Si l’élément est le premier fils d’un autre

• Pour une ancre (a) :link et :visited– généralement représentation différente des liens visités de ceux qui l'ont déjà été.– Déconseillé (modification des habitudes des utilisateurs)

• pseudo−classes dynamiques :active , :hover et :focus– :hover pour l’élément survolé par un pointeur (souris)– :active pour l’élément actif (entre le pressed et le realeased)

• Peut servir dans certain cas sur du tactile

– :focus pour l’élément qui reçoit l'attention (celui−ci acceptant les événements du clavier ou d'autres formes d'entrées de texte)

• :lang– Pour préciser des éléments (en association avec l’attribut lang)

• :target– Pour savoir si un élément est la cible d’un lien – url se termine par #aId– L’élément a un id qui vaut « aId »


ISN –

Web

-2

01

4-2

01

5


• État de l’élément graphique– :enabled– :disabled – :checked

• Place dans l’arbre du document– :root– :nth-child()

Le :nth-child(an+b) pseudo-class represente un element qui a an+b-1 frère avant luiMots clefs : odd / even (impair / pair) tr:nth-child(2n+1) /* ligne impaire d’un tableau*/tr:nth-child(odd) /* idem*/

– :nth-last-child()tr:nth-last-child(-n+2) /* les deux dernières lignes d’une table */ foo:nth-last-child(odd) /* tous les éléments “foo” de n° impair, en comptant tous les enfants, en commençant à compter par la fin */

– :nth-of-type()img:nth-of-type(2n) /* une image sur deux, en commençant par la seconde */

– :nth-last-of-type()


ISN –

Web

-2

01

4-2

01

5


• Place dans l’arbre du document– :first-child – :last-child– :first-of-type – :last-of-type – :only-child– :only-of-type

tr > td:last-of-type : le dernier td d’une ligne (il peut y avoir des th après)


ISN –

Web

-2

01

4-2

01

5


• Balise vide:emptypour les balises vides (<p></p>)

• Négation:not(s)un élément E qui ne vérifie pas un sélecteur simple sUn sélecteur simple est un sélecteur de type (balise html) , sélecteur *, sélecteur sur les attributs, sélecteur de classe (.), sélecteur #, ou une pseudo-classe.


ISN –

Web

-2

01

4-2

01

5


• Précédé de ::

– Pour différencier les pseudo classes des pseudo éléments

– Préalablement de « : »

– Compatibilité (les deux) pour :first-line, :first-letter, :before et :after

• Un seul pseudo élément par sélecteur

– À la fin


ISN –

Web

-2

01

4-2

01

5


• ::first-line – première ligne du texte– dépend de la taille de la fenêtre

• ::first-letter :: première lettre du texte

• ::before et ::after– pour insérer un contenu généré avant ou après

• h1::before {content: counter(chapno, upper−roman) ". "}Ajoute une numérotation (automatique) en chiffre romain : « I. », « II. », etc.

• Fonctionne avec content http://www.w3.org/TR/css3-content/• On peut utiliser des images de fond etc. (s’il y a un content)


http://www.w3.org/TR/css3-content/

ISN –

Web

-2

01

4-2

01

5


• Descendant combinatorE F { … } /* désigne tous les F inclus, directement oupas, dans un E */

• Child combinatorsE > F { … } /* désigne tous les F inclus directementdans un E */

• Adjacent sibling combinatorE + F { … } /* Un élément F dont le frère qui le précèdeest E */

• General sibling combinatorE ~ F { … } /* Un élément F précédé par un élement E -E et F ont le même parent */


ISN –

Web

-2

01

4-2

01

5


<p class="toto">un paragraphe… de quelle couleur sera le texte ? </p>

p { color: green; }

*.toto { color: red; }


ISN –

Web

-2

01

4-2

01

5


• Le navigateur analyse le document (arbre d’éléments HTML)

• La navigateur calcule le style pour chaque éléments– Pour chaque propriété (de style) possible

– En partant du haut de l’arbre (html, puis body, …)

– Calcul en 3 étapes :

1. la valeur "spécifiée"

2. la valeur "calculée"

3. la valeur "réelle"


ISN –

Web

-2

01

4-2

01

5


• Les navigateurs doivent d'abord appliquer une valeur spécifiée à une propriété selon le mécanisme suivant (dans l'ordre de priorité) :1. Si la cascade donne une valeur, utiliser celle−ci ;

2. Autrement, si la propriété est héritée, utiliser la valeur de l'élément parent, qui est en général une valeur calculée ;

3. Autrement, utiliser la valeur initiale de la propriété. Cette valeur initiale est définie pour chaque propriété.

• La racine de l'arborescence du document n'ayant pas de parent, et ne pouvant donc pas hériter de valeurs, c'est la valeur initiale qui est utilisée si nécessaire.


ISN –

Web

-2

01

4-2

01

5


• Les feuilles de style ont trois origines différentes : l'auteur, l'utilisateur et le navigateur.

• L'auteur – produit des feuilles de style.

• L'utilisateur – peut être capable d'indiquer une information de style pour un document

particulier. (style personnelle)

• Le navigateur– applique sa feuille de style par défaut avant toutes les autres feuilles de style

d'un document. – Cette feuille de style devrait présenter les éléments du document de façon à

satisfaire au rendu généralement admis pour ceux−ci. Par exemple, pour des navigateurs visuels, l'élément EM en HTML est rendu avec une police en italique.

– Style par défaut

• Ordre de priorité : Auteur, puis utilisateur puis navigateur– Parfois utilisateur prioritaire (cas d’handicap)


ISN –

Web

-2

01

4-2

01

5


• Trouver toutes les déclarations– Pour chaque propriété (selon média)

– Pour chaque élément (sélecteurs)

• Trier selon l’origine – auteur > utilisateur > navigateur

• Trier selon spécificité des sélecteurs – les plus spécifiques prévalent

– Les pseudo−éléments et les pseudo−classes sont considérés comme éléments et classes

• Trier selon ordre d’apparition– si deux règles ont les mêmes poids, origines et spécificités, c'est la dernière

survenue qui l'emporte.

– Les règles issues de feuilles de style importées sont considérées comme étant survenues avant chacune de celles de la feuille de style elle−même.


ISN –

Web

-2

01

4-2

01

5


• La spécificité d'un sélecteur est déterminée comme suit :

– dans le sélecteur, compter le nombre d'attributs Id (= a) ;

– puis celui des autres attributs, classes et des pseudo−classes (= b) ;

– et ensuite le nombre de « type selector » et de « pseudo element » (= c) ;

– ignorer le sélecteur universel .

• Assembler les trois nombres a−b−c (dans un système de nombre avec une base étendue) pour obtenir la spécificité.

– * {} /* a=0 b=0 c=0 −> specificité = 0 */

– LI {} /* a=0 b=0 c=1 −> specificité = 1 */

– UL LI {} /* a=0 b=0 c=2 −> specificité = 2 */

– UL LI+LI {} /* a=0 b=0 c=3 −> specificité = 3 */

– H1 + *[REL=up]{} /* a=0 b=1 c=1 −> specificité = 1-1 */

– UL OL LI.red {} /* a=0 b=1 c=3 −> specificité = 1-3 */

– LI.red[title] {} /* a=0 b=2 c=1 −> specificité = 2-1 */

– #x34y {} /* a=1 b=0 c=0 −> specificité = 1-0-0 */

• Pour HTML, les valeurs de l'attribut "style" sont des règles de feuille de style. – Ces règles n'ont pas de sélecteurs

– mais pour la cascade, elles sont plus prioritaire qu’un sélecteur d'ID (spécificité : α= 1 a=0, b=0, c=0).

– dans l'optique du point 4 (ordre d’apparition), elles surviennent après toutes les autres règles.


ISN –

Web

-2

01

4-2

01

5


Refaire le tableau pour qu’il ressemble à l’image ci-contre

Le code source est http://dabblet.com/gist/78f982b086ac01fdbe56

L’interaction montrée sur les deux dernières images le sont sur toutes les lignes

Pour la gros lettre, il faut utiliser « float: left ; »

Pour la table, il faut utiliser « border-spacing: 0; »

Une fois terminer, ajouter une troisième colonne


http://dabblet.com/gist/78f982b086ac01fdbe56

les différents sélecteurs et les règles pour savoir...

Documents