Header
Partagez | 

Ciblons avec les sélecteurs en CSS !

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Eluknow

Doyen
Bons Points (BP) : 107
Voir le profil de l'utilisateur http://a-toi-de-coder.forumactif.org/

Message Sujet: Ciblons avec les sélecteurs en CSS !    Ven 21 Mar - 8:00

Cibler des éléments d'une page avec les sélecteurs CSS


Bonjour !
Dans ce tutoriel nous allons voir comment sélectionner des éléments dans une page html avec des codes css appelés sélecteurs.
Vous devez certainement en connaître quelques-uns sans vraiment le savoir, par exemple :hover beaucoup utilisé avec les liens, qui permet en réalité, dans cette philosophie de sélection, de cibler tel ou tel élément qui est en train d'être survolé par la souris.
Nous allons en voir une très grande liste, alors accrochez-vous, c'est parti !

Sommaire :


MAJ du tutoriel le 03/06/2014 : Adaptation des codes en HTML5


Dernière édition par Eluknow le Mar 3 Juin - 17:59, édité 3 fois
Revenir en haut Aller en bas



Cadeau de Noël


Mon dipl'homme:
 

Avatars et signas cadeaux':
 

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Eluknow

Doyen
Bons Points (BP) : 107
Voir le profil de l'utilisateur http://a-toi-de-coder.forumactif.org/

Message Sujet: Re: Ciblons avec les sélecteurs en CSS !    Ven 21 Mar - 8:02

La sélection de base


Actuellement, pour sélectionner un élément dans votre code css, vous faisiez certainement quelque chose du type :
#name ou .name
selon que l'élément possède un id ou une class.
Pour rappel, voici un exemple :
code:
 
aperçu:
 

Afin d'être plus précis dans la CSS, on peut ajouter devant le nom de l'attribut la nature de l'élément HTML.
Plus simplement, cela signifie que si on a une div possédant un id nommée "name", on aura dans le css :
div#name
On peut donc corriger notre code précédent en suivant cette méthode :
exemple deux:
 
Niveau visuel, le résultat est toujours le même :
aperçu deux:
 

Tout est compris ? Si oui, alors [continuons] ! Si non, n'hésite pas à [poser tes questions] Wink


Dernière édition par Eluknow le Dim 4 Mai - 9:50, édité 3 fois
Revenir en haut Aller en bas



Cadeau de Noël


Mon dipl'homme:
 

Avatars et signas cadeaux':
 

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Eluknow

Doyen
Bons Points (BP) : 107
Voir le profil de l'utilisateur http://a-toi-de-coder.forumactif.org/

Message Sujet: Re: Ciblons avec les sélecteurs en CSS !    Ven 21 Mar - 8:03

Sélectionner des éléments par leur nom de balise


Non non, ce n'est pas parce que le titre fait peur que c'est compliqué :p.
En fait, on peut sélectionner des éléments HTML de notre page directement dans la CSS, en indiquant leur nom.
Par exemple, si on veut attribuer une couleur de fond à toute la page, on mettra un code du type :

screen

Si vous regardez bien, on n'a pas d'id (#), ni de class (.), non. On a juste le nom d'une balise de notre page, la balise body.
Puisque la balise body englobe tout le contenu de notre page, si on veut mettre un fond à toute notre page, on a juste à sélectionner cette balise body. Logique non ^^ ? :p

Aller, un petit exemple pour vous remontrer avec des balises structurantes toutes nouvelles de la version 5 d'HTML. La balise "header" qui permet d'englober un texte situé en haut d'une balise ou en haut de toute la page ; la balise "section" qui permet d'englober un groupe de textes ayant un rapport, et la balise "footer", contraire de la balise "header" qui permet d'englober un texte situé en bas d'une balise ou en bas de toute la page.
exemple trois :
 
exemple trois :
 

Bon, maintenant par contre, y'a un petit problème qui survient : Si on a plusieurs balises section comme ici, ça va être dur si on veut que les deux n'aient pas la même mise en page. Dans ce cas, on ne peut qu'utiliser les id ou les class.

Imaginons maintenant un code de la sorte :

screen
Si on veut sélectionner la balise span contenue dans le lien (a) lui-même contenu dans le paragraphe (p) qui est dans la div sans pour autant sélectionner le second span qui dans le second paragraphe, eh bien c'est possible ! Et même pas besoin d'id, de class, mais simplement besoin d'indiquer le "chemin absolu" jusqu'au span. On aura donc :
sreen

Avec comme traduction : On veut appliquer le style à la balise span qui se trouve à
l'intérieur de la balise a, qui elle même se trouve dans le paragraphe qui lui se trouve dans la div.

Facile non ? Du coup, si on veut sélectionner le strong dans le footer, on aura :

screen


Et le résultat final de notre page sera :


résultat

Dernière chose : si on veut sélectionner toutes les balises x et toutes les balises y. C'est possible !
Si on veut sélectionner toutes les divs et tous les paragraphes, on aura :

screen
Ce code permet d'appliquer le même style (ici, une bordure de 3px de type solide et verte) à tous les "p" et à toutes les "div".
En fait, il suffit de séparer les noms de balises par une virgule suivie d'un espace Wink.

On passe maintenant à [la suite] si tu n'as pas de [questions] ?


Dernière édition par Eluknow le Mar 8 Avr - 15:24, édité 6 fois
Revenir en haut Aller en bas



Cadeau de Noël


Mon dipl'homme:
 

Avatars et signas cadeaux':
 

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Eluknow

Doyen
Bons Points (BP) : 107
Voir le profil de l'utilisateur http://a-toi-de-coder.forumactif.org/

Message Sujet: Re: Ciblons avec les sélecteurs en CSS !    Ven 21 Mar - 8:06

Sélectionnons avec les pseudo-classes !



On va commencer à rentrer dans le vif du sujet maintenant !
Déjà, définissons ce que sont les pseudo-classes.
Pseudo-classes :
 

/!\ Alerte rouge /!\ : Toutes les pseudo-classes que nous verrons sont incompatibles avec les versions d'Internet Explorer antérieures à 7 !

Maintenant, continuons.

Les pseudo-classes



On va faire une liste des pseudo-classes existantes.

:first-child sélectionne le premier enfant d'un élément. C'est à dire la première chose générée par un élément.
Par exemple :

screenscreen
Explication du code : il attribue la mise en page définie au premier enfant de l'élément (ici, le premier élément de la liste)

:last-child sélectionne, contrairement à first-child, le dernier enfant d'un élément. (la dernière chose générée par l'élément).
screenscreen
Explication du code : il attribue la mise en page définie à la dernière chose générée par l'élément, soit, dans le cas présent, le dernier <li> généré par la liste.

:first-of-type sélectionne le premier enfant d'un élément en fonction de son type. Ca veut dire qu'on sélectionne la première chose générée par l'élément, de type X (le type étant la balise).
Prenons un exemple avec des balises HTML5 : article qui est une balise englobant les différents textes en rapport dans une balise section et aside qui a à peu près la même fonction à la seule différence qu'il englobe un texte qui n'a pas de rapport avec les autres.

Code:
<style>
article:first-of-type{
color: darkorchid;
}</style>
<body>
<section>
<h1>Titre</h1>
<aside>Container aside</aside>
<article>Container article 1</article>
<article>Container article 2</article>
</section>
</body>
screen
Explication du code : Ici, on sélectionne la première chose générée de type article par la balise parente (la balise qui englobe tous les articles et asides, soit la balise section) et on colore le texte en darkorchid.

:last-of-type sélectionne le dernier enfant d'un élément en fonction de son type. C'est exactement le contraire de first-of-type Wink. Il sélectionne la dernière chose générée alors que first-of-type sélectionne la première Wink. Allez, un petit exemple quand même, avec les mêmes balises, pour être certain que tout soit bien compris :

Code:
<style type="text/css">
h2:last-of-type{ /** Attribue la mise en page définie au dernier h2**/
color: darkorchid;
}
  </style>
<body>
<section>
<h1>Titre</h1>
<aside>Container aside</aside>
<h2>Titre 2</h2>
<article>Container article 1</article>
<article>Container article 2</article>
<h2>Titre 2.2</h2>
</section>
</body>
screen

:nth-child() sélectionne un ou plusieurs éléments en fonction de leur position au sein de leur élément mère (ou parent). Cette pseudo-classe possède deux notations.
Voyons la première notation, qui est sous la forme nth-child(X). X représentant la position de l'élément dans sa balise parente (pour rappel, balise parente = la balise dans laquelle se trouve l'élément qu'on sélectionne).

Code:
<style type="text/css">
div p:nth-child(2){
color: goldenrod;
}
  </style>
<body>
<div>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<p>Paragraphe 3</p>
<p>Paragraphe 4</p>
<p>Paragraphe 5</p>
</div>
</body>
screen
Explication du code : On sélectionne le paragraphe en deuxième position dans sa div parente (ou div mère) et on le colore en "goldenrod"

Seconde notation de nth-child(). Cette notation peut s'exprimer de la sorte nth-child(xn+y) avec x et y des nombres entiers. Par exemple nth-child(3n+3). Maintenant, c'est bien de savoir ça, mais qu'est-ce que ça veut dire.
Reprenons notre expression de base avec x et y :
xn signifie le nombre d'espace entre les éléments sélectionnés dans l'élément parent.
+y signifie l'élément à partir duquel on commence à compter.
Donc nth-child(3n+3) signifie : Sélectionner tous les 3 éléments à partir du troisième élément
Vérifions ça tout de suite :

Code:
<style type="text/css">
div p:nth-child(3n+3){
color: goldenrod;
}
  </style>
<body>
<div>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<p>Paragraphe 3</p>
<p>Paragraphe 4</p>
<p>Paragraphe 5</p>
<p>Paragraphe 6</p>
<p>Paragraphe 7</p>
<p>Paragraphe 8</p>
<p>Paragraphe 9</p>
</div>
</body>
screen
Explication du code : On compte à partir du 3ème paragraphe, donc on le sélectionne et on attribue sa mise en page (ici on le colore en goldenrod), et tous les 3 paragraphes on réattribue cette mise en page.

:lang() sélectionne les éléments dont l'une des langues définies par l'attribut lang est la langue indiquée. Voici un petit exemple avec des paragraphes en différentes langues.
/!\ Alerte Rouge /!\ En plus de ne pas être compatible avec les versions de IE antérieures à 7, cette pseudo-classe ne l'est pas non plus avec IE version 8

Code:
<style>
p:lang(fr){
color: darkolivegreen;
}</style>
<body>
<p lang="it">Paragraphe 1 (langue : italien)</p>
<p lang="fr">Paragraphe 2 (langue : français)</p>
<p lang="fr-ca">Paragraphe 3 (langues : français-canadien)</p>
</body>
screen

Les pseudo-classes avancées de type "nth-child()"



Ces pseudo-classes fonctionnent sur le même principe que nth-child().
Les voici :
:nth-of-type() sélectionne les éléments d'un certain type.

:nth-last-child() sélectionne les éléments en partant de la fin (comptage à partir du dernier élément).

:nth-last-of-type() sélectionne les éléments d'un certain type, en partant de la fin (mélange de nth-of-type() et nth-last-child()).

Voici un exemple où les trois sont utilisés. N'hésitez pas à relire le code et les explications pour bien le comprendre Wink

Code:
<style type="text/css">
div p:nth-of-type(2n+5){
color: goldenrod;
}

div h1:nth-last-child(3n+3){
color: tomato;
}

div h2:nth-last-of-type(2){
color: purple;
}
  </style>
<body>
<div>
<h1>Titre 1</h1>
<p>Paragraphe 1</p>
<h1>Titre 1.2</h1>
<p>Paragraphe 2</p>
<h1>Titre 1.3</h1>
<p>Paragraphe 3</p>
<h2>Titre 2</h2>
<p>Paragraphe 4</p>
<h2>Titre 2.1</h2>
<p>Paragraphe 5</p>
<p>Paragraphe 6</p>
<p>Paragraphe 7</p>
<p>Paragraphe 8</p>
<p>Paragraphe 9</p>
</div>
</body>
screen
Explication du code : En premier, on sélectionne un paragraphe sur deux de la div parente à partir du cinquième. En second, (ça se complique niveau interprétation), on sélectionne un titre (h1) sur 3, à partir du troisième. Sauf qu'on compte à l'envers, donc à partir du premier. Donc on compte comme ça : titre 1 vers titre 2 (1ère position), titre 2 vers titre 3 (2ème position), et on recommence à l'envers donc titre 3 vers titre 2 (3ème position). Et pour finir, on sélectionne le 2ème titre 2, mais en comptant à l'envers, donc le premier titre 2.

Les pseudo-classes dynamiques



Les pseudo-classes dynamiques sélectionnent des éléments lorsqu'ils subissent une interaction.

Les voici :

:hover sélectionne un élément qui est survolé par la souris.

screen hover
Explication de code : On sélectionne tous les liens (a) qui sont survolés par la souris et on les colore en vert.

:visited sélectionne un élément que l'internaute a déjà visité (ne s'applique qu'aux liens).

screen visited
Explication du code : On sélectionne tous les liens (a) qui ont déjà été visités par l'internaute et on les colore en rouge foncé.

:active sélectionne un élément qui est en train d'être cliqué (ne s'applique qu'aux liens).

screen active
Explication du code : On sélectionne le lien (a) qui est en train d'être cliqué et on le colore en couleur citron vert.

:focus sélectionne un élément qui possède le focus, c'est à dire, qui est sélectionné par défaut (à l'ouverture de la page, la souris est déjà sur l'élément/dans l'élément)

screen focus
Explication du code : On sélectionne l'input (zone de texte dans un formulaire) qui possède le focus et on lui attribue une bordure rouge de 6px de type "groove"

Il est bien évidemment possible de sélectionner des éléments avec les pseudo-classes dynamiques en indiquant son "chemin absolu" par exemple :

screen chemin absolu pseudo-classes dynamiques
Explication du code : On sélectionne le span possédant comme id name survolé par la souris dans le paragraphe (p) contenu dans la div et on lui attribue une couleur de fond blanche.

Pseudo-classes d'enfant unique


Encore un nom déroutant je plussoie :p.
Quoi qu'il en soit, étant des codeurs plein de rage d'apprendre, nous allons continuer ! :p
Définition : Une pseudo-classe d'enfant unique sélectionne un élément qui est enfant unique, c'est à dire, qui n'a pas d'élément frère (il est seul dans la balise qui la contient (balise parente/mère)).

:only-child sélectionne un élément qui est enfant unique.

Code:
<style>
ul li:only-child{
color: coral;
}</style>
<body>
<ul>
<li>Elément 1</li>
<li>Elément 2</li>
</ul>
<ul>
<li>Elément 3</li>
</ul>
<ul>
<li>Elément 4</li>
<li>Elément 5</li>
<li>Elément 6</li>
</ul>
</body>
screen

:only-of-type sélectionne un élément qui est enfant unique mais d'un type donné.

Code:
<style>
div p:only-of-type{
color: coral;
}</style>
<body>
<div>
<h1>Titre 1</h1>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
</div>
<div>
<p>Paragraphe 3</p>
<h2>Titre 2</h2>
</div>
</body>
screen
Ici, seul le dernier paragraphe est sélectionné car il est unique enfant de type "p" de la div parente.

:empty sélectionne un élément qui est vide.

Code:
<style>
div:empty{
background-color: blue;
width: 100px;
height: 60px;
}</style>

<body>
<div></div>
<div><p>Texte 2 dans paragraphe</p></div>
</body>
screen

Pseudo-classes inclassables



Et bien on a presque fini les pseudo-classes ! Il nous en reste juste 2 à voir. Elles sont inclassables.

:target sélectionne l'élément lorsqu'il est la cible d'un lien.
Exemple :

Code:
<style>
h2:target{
font-size: 15px;
color: lightslategrey;
}</style>

<body>
<a href="#titre2">Lien vers le titre 2</a>
<h1 id="titre1">Titre 1</h1>
<h2 id="titre2">Titre 2</h2>
</body>

screen screen

:not() permet de ne pas sélectionner les éléments qui possède tel ou tel attribut.

Code:
<style>
p:not(.contents){ /** Sélectionne les paragraphes qui n'ont pas pour class "contents" **/
color: peru;
}

p a:not(:visited){ /** Sélectionne les liens du paragraphe qui n'ont pas été visité **/
color: lightsteelblue;
}

div input:not(:enabled){ /** Sélectionne les inputs de la div qui ne sont pas actifs  **/
background-color: rosybrown;
}
</style>

<body>
<p class="contents">Paragraphe 1</p>
<p class="pascontents">Paragraphe 2 possédant <a href="#aaa">deux</a> <a href=".">liens (celui-ci visité)</a></p>
<div><input type="text" enabled />
<input type="text" disabled />
</div>
</body>
screen

Fiouuu ! Tu as peut être des [questions] car ça en fait déjà des sélections ! Mais [ce n'est pas fini] !


Dernière édition par Eluknow le Mer 25 Fév - 10:15, édité 10 fois
Revenir en haut Aller en bas



Cadeau de Noël


Mon dipl'homme:
 

Avatars et signas cadeaux':
 

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Eluknow

Doyen
Bons Points (BP) : 107
Voir le profil de l'utilisateur http://a-toi-de-coder.forumactif.org/

Message Sujet: Re: Ciblons avec les sélecteurs en CSS !    Ven 21 Mar - 8:08

Les pseudo-éléments



/!\ Alerte rouge /!\ Les pseudo-éléments ne sont pas pris en compte par :
-La version 9 d'Internet Explorer et toutes les versions antérieures.
-Mozilla Firefox si le préfixe -moz- n'est pas appliqué.
-Les versions 9 et antérieures d'Opera.
-Le navigateur Safari des iOS.
-Opera Mini.
-Les versions 4.3 et antérieures du navigateur d'Android.
-Le navigateur des BlackBerry'.
-Mozilla Firefox pour Android.

Après cette mise en garde, il y a de quoi rebuter. Certes. Mais, ces pseudo-éléments sont bons à connaître : ils nous facilitent amplement la vie !

:first-letter sélectionne la première lettre d'un élément.
Exemple :
Code:
p:first-letter{
color: chocolate;
font-size: 25px;
}
screen

:first-line sélectionne la première ligne d'un élément.
Exemple :
Code:
p:first-line{
color: chocolate;
font-size: 15px;
}
screen

:after permet l'ajout de contenu après l'élément sélectionné.
Exemple :
Code:
span:after{
content: ' ♦';
}
screen

:before permet l'ajout de contenu avant l'élément sélectionné.
Code:
span:before{
content: '• ';
}
screen

Évolutions des pseudo-éléments en CSS3
Afin de les différencier des pseudo-classes, dès la version 3 de CSS, les pseudo-éléments changent de syntaxe.
Ainsi, :first-letter n'existe plus. Il est fonctionnel mais n'est pas dans CSS3. Si nous voulons utiliser ces pseudo-éléments en version 3 de CSS, il suffit de doubler les deux points.
On aura donc :
::first-letterp::first-letter{/** Propriétés}
::first-linediv::first-line{/** Propriétés}
::aftera::after{/** Propriétés}
::beforespan::before{/** Propriétés}

Passons à la suite si tu n'as pas de [question] avec les sélecteurs avancés !


Dernière édition par Eluknow le Mar 8 Avr - 15:41, édité 1 fois
Revenir en haut Aller en bas



Cadeau de Noël


Mon dipl'homme:
 

Avatars et signas cadeaux':
 

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Eluknow

Doyen
Bons Points (BP) : 107
Voir le profil de l'utilisateur http://a-toi-de-coder.forumactif.org/

Message Sujet: Re: Ciblons avec les sélecteurs en CSS !    Ven 21 Mar - 8:09

Les sélecteurs avancés



+ , appelé sélecteur d'adjacence directe, sélectionne l'élément juste après l'élément indiqué.
Si nous avons 3 balises articles au sein d'une balise section, et qu'on fait article + article, la sélection se portera sur le second et le troisième article, comme le démontre cet exemple :

Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Titre de ma page</title>
<style>
article + article{
color: Seagreen;
}
</style>
</head>
<body>
<section>
<article>Article 1</article>
<article>Article 2</article>
<article>Article 3</article>
</section>
</body>
</html>
screen
Explication : Ici on sélectionne les enfants de premier niveau de la balise section. Ce sont donc les balises article. Mais, que signifie "de premier niveau" ? En fait, ça signifie que s'il y aurait eu une balise à l'intérieur d'une des balises article, celle-ci n'aurait pas été sélectionnée Wink

Je suis certain que plusieurs d'entre vous pensaient que seul le second serait sélectionné. Mais non ! Car voici comment peut se traduire ce article + article :
"sélectionne l'article qui suit un article."
Et oui, le second article suit le premier article, et le troisième article suit le deuxième.
Si on voulait sélectionner le premier article alors... Qu'aurait-il fallu faire ? La plupart penserait à faire : section + article, sauf que, si vous essayez, ça ne fonctionne pas. Eh non, car le premier article n'est pas un élément qui suit la balise section, mais un élément qui est dans la balise section. Donc trois alternatives possibles : ne pensez même pas à refermer la balise section avant la balise article (le code serait très faux), mais, repartir sur les bases avec les id/class ou utiliser first-child, serait déjà mieux Wink

> appelé sélecteur d'enfant direct, sélectionne les enfants de premier niveau uniquement de l'élément parent indiqué.
Reprenons notre code précédent et voyons ce qui se passe en mettant section > article :

Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Titre de ma page</title>
<style>
section > article{
color: Seagreen;
}
</style>
</head>
<body>
<section>
<article>Article 1</article>
<article>Article 2</article>
<article>Article 3</article>
</section>
</body>
</html>
screen

~ appelé sélecteur d'adjacence indirecte, sélectionne les éléments qui suivent l'élément indiqué même si un autre élément se glisse entre les deux. Modifions un tout petit notre précédent code et voyons plus clairement comme ça fonctionne :

Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Titre de ma page</title>
<style>
section ~ div{
color: Seagreen;
}
</style>
</head>
<body>
<section>
<article>Article 1</article>
<article>Article 2</article>
<article>Article 3</article>
</section>
<div>Div une</div>
<div>Div deux</div>
<p>Paragraphe un</p>
</body>
</html>
screen
Explication : Ici nous sélectionnons les balises div suivant la balise section. Il y aurait eu le paragraphe (<p>Paragraphe un</p>) entre les deux balises ou bien entre les deux div, les div auraient tout de même été sélectionnées Wink. C'est ce qui fait la spécificité de ce sélecteur.

Allez, encore un petit peu de lecture, [les sélecteurs d'attributs] nous attendent ! Tout comme [ce sujet] si tu as des questions.


Dernière édition par Eluknow le Mar 8 Avr - 15:53, édité 3 fois
Revenir en haut Aller en bas



Cadeau de Noël


Mon dipl'homme:
 

Avatars et signas cadeaux':
 

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Eluknow

Doyen
Bons Points (BP) : 107
Voir le profil de l'utilisateur http://a-toi-de-coder.forumactif.org/

Message Sujet: Re: Ciblons avec les sélecteurs en CSS !    Ven 21 Mar - 8:11

Les sélecteurs d'attributs



[attribut] sélectionne les éléments possédant l'attribut attribut.
Imaginons que nous voulons sélectionner seulement les images qui ont un titre. On aura alors :
Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Titre de ma page</title>
<style>
img[title]{
border: 6px inset darkred;
}
img:not([title]){
border: 6px inset darkgreen;
}
</style>
</head>
<body>
<div><img src="http://image.noelshack.com/fichiers/2014/08/1393021936-avatar.png" alt="Avatar de Théoz" title="Avatar de Théoz" />
<img src="http://i1317.photobucket.com/albums/t629/Minouchka2013/Cadeaux%20SoP/Avatar_zpsbf427333.png" alt="Avatar d'Eluknow" /></div>
</body>
</html>
screenIci, je me suis amusé à sélectionner aussi les images qui n'ont pas l'attribut title grâce à not().
Explication du code : Ici, seul l'avatar de mon collègue Théoz possède l'attribut title. C'est donc la seule image sélectionnée, et donc, elle est entourée d'une bordure rouge foncée. Mon avatar quant à lui, ne possède pas l'attribut title. Donc, il est sélectionné par le code css img:not([title]), et les propriétés de ce code lui sont attribuées : il est donc entouré d'une bordure vert foncé.




[attribut="val"] : sélectionne les éléments possédant un attribut qui est égal à val.
Voici un exemple, toujours avec nos avatars, pour illustrer ce sélecteur d'attribut :

Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Titre de ma page</title>
<style>
img[title="Avatar de Théoz"]{
border: 6px inset darkred;
}

img[alt="Avatar d'Eluknow"]{
border: 6px outset darkgreen;
}
</style>
</head>
<body>
<div><img src="http://image.noelshack.com/fichiers/2014/08/1393021936-avatar.png" alt="Avatar de Théoz" title="Avatar de Théoz" />
<img src="http://i1317.photobucket.com/albums/t629/Minouchka2013/Cadeaux%20SoP/Avatar_zpsbf427333.png" alt="Avatar d'Eluknow" title="Avatar d'Eluknow" /><br />
~~ Avatar de Théoz ~~ | ~~ Avatar d'Eluknow ~~</div>
</body>
</html>
screenExplication du code : Ici, deux sélections sont apparentes : la première sélectionne les images qui ont pour valeur d'attribut title "Avatar de Théoz", la seconde sélectionne les images qui ont pour valeur d'attribut alt "Avatar d'Eluknow". Si on regarde bien le code html, l'avatar de Théoz possède un title qui a pour valeur "Avatar de Théoz", il est donc sélectionné par la première sélection (img[title="Avatar de Théoz"]) et hérite de ses propriétés (bordure rouge foncé inset de 6px). Et l'avatar d'Eluknow (mon mien Very Happy), possède un alt qui a pour valeur "Avatar d'Eluknow" il est donc sélectionné par la seconde sélection et hérite de ses propriétés soit une bordure vert foncé outset de 6px.




[attribut~=val] : sélectionne les éléments possédant un attribut ayant une valeur égale à val. (cas des class multiples. Les data-attributes peuvent être ciblés). Etant sensiblement la même chose que le précédent, je ne ferais pas d'exemples dessus, cela fonctionne pareil !




[attribut^=val] : sélectionne les éléments possédant un attribut ayant une valeur commençant par val. Ca se rapproche aux expressions régulières si certains connaissent (en programmation) Wink.
Petite mise en situation pour illustrer cela : imaginons qu'on ait une page où il y a des tutoriels et des commentaires. Les tutoriels auraient un id du type : tuto-X et les commentaires un id tu type : com-X.
Afin d'attribuer une mise en page différente aux tutoriels et aux commentaires, le code suivant serait parfait :

Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Titre de ma page</title>
<style>
div[id^=tuto]{
font-weight: bold;
}

div[id^=com]{
font-style: italic;
}
</style>
</head>
<body>
<div id="tuto1">Tutoriel n°1</div>
<div id="com1">Commentaire n°1</div>
<div id="com2">Commentaire n°2</div>
<div id="tuto2">Tutoriel n°2</div>
<div id="com3">Commentaire n°3</div>
</body>
</html>
screen
Explication du code : Les div qui ont un id commençant par tuto sont sélectionnées et leur contenu est mis en gras. Les div qui ont un id commençant par com sont elles aussi sélectionnées mais leur contenu est mis en italique.




[attribut$=val] : sélectionne les éléments possédant un attribut ayant une valeur se terminant par val.
Mise en situation n°2 : On continue avec nos tutoriels et commentaires, et on veut que le tutoriel n°2 et le commentaire n°3 soient différents des autres.

Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Titre de ma page</title>
<style>
div[id^=tuto]{
font-weight: bold;
}

div[id^=com]{
font-style: italic;
}

div[id$=o2]{
color: grey;
}

div[id$=m3]{
color: purple;
}
</style>
</head>
<body>
<div id="tuto1">Tutoriel n°1</div>
<div id="com1">Commentaire n°1</div>
<div id="com2">Commentaire n°2</div>
<div id="tuto2">Tutoriel n°2</div>
<div id="com3">Commentaire n°3</div>
</body>
</html>
screen
Ici, on est obligé de rajouter o devant le 2 car il y aussi le commentaire 2. J'ai fait pareil pour le commentaire : m3.
Explication du code : En plus de sélectionner les tutoriels et commentaires par leur id en regardant par quoi ils commencent, on les sélectionne aussi avec ce qu'ils terminent aussi.




[attribut*=val] : sélectionne les éléments possédant un attribut ayant une valeur contenantcval.
Dernière petite mise en situation pour expliquer ça.
On a plusieurs liens dans une page. On veut que seuls les liens envoyant sur school of pub soient colorés. Alors le code suivant représente bien la situation Wink

Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Titre de ma page</title>
<style>
a[href*=school-of-pub]{
border: 5px double red;
}
</style>
</head>
<body>
<div><a href="http://www.school-of-pub.net/">Lien 1</a> | <a href="http://school-fo-bup.com">Lien 2</a> | <a href="www.school-of-pub.net">Lien 3</a> | <a href="http://school-of-pub.fr">Lien 4</a> | <a href="http://blabbla.fr">Lien 5</a>
</body>
</html>

screen
Explication du code : ici pas grand chose à expliquer : les liens contenant "school-of-pub" sont sélectionnés et on leur attribue une bordure rouge de 5px de type double.




On a presque fini ! Il ne reste plus que [nos formulaires chéris] ! Si tu as des questions, c'est [ici].


Dernière édition par Eluknow le Mar 8 Avr - 15:57, édité 7 fois
Revenir en haut Aller en bas



Cadeau de Noël


Mon dipl'homme:
 

Avatars et signas cadeaux':
 

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Eluknow

Doyen
Bons Points (BP) : 107
Voir le profil de l'utilisateur http://a-toi-de-coder.forumactif.org/

Message Sujet: Re: Ciblons avec les sélecteurs en CSS !    Lun 14 Avr - 19:39

Les sélecteurs propres aux formulaires



:enabled sélectionne les chans (les chans étant les éléments du formulaire (appelés aussi "champs" ou "zones")) du formulaire qui ne sont pas inactifs (soit, plus simplement, qui sont actifs).

:disabled sélectionne les chans du formulaire qui sont inactifs.

:checked sélectionne les chans du formulaire qui sont cochés ou sélectionnés.
Voici donc un code qui servira d'exemple pour tous les sélecteurs propres aux formulaires :
Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Titre de ma page</title>
<style>
input:focus{
border: 6px groove chocolate;
}
input:enabled{
color: goldenrod;
}

input:disabled{
background-color: darkgrey;
}

input[type="password"]{
color: darkorchid;
}

input:checked + label{
border: 3px solid green;
}
</style>
</head>
<body>
<form>
<input type="text" value="pseudo" id="focus" autofocus="autofocus"/>
<input type="text" value="prénom" />
<input type="date" disabled />
<input type="password" value="password" />
<input type="checkbox" checked name="homme" id="homme"/><label for="homme">Homme</label><br />
<input type="checkbox" name="femme" id="femme"/><label for="femme">Femme</label>
</form>
</body>
</html>
screen final
Explication du code : En premier, on sélectionne tous les inputs qui ont le focus (attribué grâce à l'attribut autofocus) et on leur attribue une bordure de 6px, groove de couleur chocolat.
Après, on sélectionne les inputs actifs et on leur attribue une couleur de texte "goldenrod", contrairement à la troisième sélection, qui porte sur les inputs inactifs, sur lesquels on attribue une couleur de fond grise foncée.
Sur les inputs de type password, on attribue une couleur de texte "darkorchid".
Et enfin, on sélectionne les inputs cochés et on attribue à leur label une bordure de 3 pixels, solide et verte.

C'est fini !


Si vous en êtes là, c'est que vous avez été de bons codeurs ! Vous savez maintenant utiliser les sélecteurs en CSS ! Afin d'en mémoriser une grande partie, entraînez vous ! Essayez des choses, combinez-les entre elles !
Bonne journée, et codez bien !



Les sélecteurs vous questionnent toujours ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].



Je soussigné, Eluknow, n'accepte pas qu'un directeur reposte le présent tutoriel "Sélectionnons avec les sélecteurs CSS" tel que je l'ai rédigé.
Revenir en haut Aller en bas



Cadeau de Noël


Mon dipl'homme:
 

Avatars et signas cadeaux':
 

Ciblons avec les sélecteurs en CSS !
Page 1 sur 1
 Sujets similaires
-
» j ai des souci , je debute depuis ce jour avec linux fedora
» Lecture video interrompue avec mise en tampon
» probleme avec les cellules d'excel sur la mise en forme
» [Résolu]Mis a jour impossible avec Antivir
» [Résolu] Problème avec psg tv
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+