avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 25 Jan 2018 - 1:10
Avant de passer à autre chose il reste un point à voir concernant les sélecteurs

Peux-tu m'expliquer la différence entre ces deux sélecteurs :
Code:

.class div {color: red;}

.class > div {color: red;}


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 26 Jan 2018 - 19:24
Hum, je connais le premier, on l'a déjà pas mal utilisé, donc il fera que toute les div placé dans un élément auquel est attribué la classe auront leur texte en rouge, mais le deuxième je connais pas du tout, je l'ai jamais vu o: J'arrive même pas à deviner à quoi il peut bien servir alors je pourrais pas te dire la différence x)
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 30 Jan 2018 - 0:13
Je m'excuse du retard, je ne sais pas si tu as vu ma notification d'absence.

En tout cas :

Le premier sélecteur (espace) qu'on utilise très souvent va mettre toutes les div à l'intérieur de l'élément class en rouge peut importe leur niveau de descendance.

Le second sélecteur (>) va mettre uniquement les descendants directs en rouge. C'est à dire que si un élément à l'intérieur de l'élément class comprend une div, elle ne sera pas rouge vu qu'elle n'est pas directement dans l'élément class mais un sous élément d'un élément "fils" de l'élément class.

Pour mieux illustrer ceci, voici un exemple



C'est exactement le même HTML. Dans le premier élément que j'ai appelé class1 on a sélectionné toutes les span pour être en rouge.
Dans le 2ème élément class2 seule la span directement dans class2 est rouge. Alors que la span a l'intérieur du descendant de class2 ne l'est pas.

Dis-moi si ce n'est pas clair


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 1 Fév 2018 - 22:31
Oh, je vois, je comprends parfaitement, c'est très clair ! ^^
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 2 Fév 2018 - 19:08
Super, on va maintenant introduire le sélecteur universel * (étoile)

Ce sélecteur permet d'appliquer des propriétés CSS à l'ensemble des éléments de la page HTML. C'est à dire que chaque propriété sera appliquée à chaque élément de la page sans exception, c'est pourquoi il faut faire très attention quand on l'utilise.
Voici un exemple :



C'est un sélecteur qu'on va éviter dans une commande par exemple puisqu'il aura un impact sur l'ensemble du forum et non seulement la partie qu'on a codé.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 3 Fév 2018 - 13:38
Ooh ça a l'air bien pratique ça ! Je retiens :3

Envoyé depuis l'appli Topic'it
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Dim 4 Fév 2018 - 18:03
On va voir un autre sélecteur qui utilise le signe * aussi mais qui est différent du sélecteur universel.
Tu te rappelles avant on a vu le sélecteur des descendants directs (>) qui excluent les enfants des enfants et donc les descendants indirects. Maintenant on va voir comme sélectionner uniquement les descendants indirects. Dans l'exemple précédent si on remplace :

Code:
.class2 > span {
    color: red;
  }

Par :

Code:
.class2 * span {
    color: red;
  }

Seule la dernière phrase sera en rouge. Je te laisse essayer par toi-même sur l'exemple : ici
N'oublie pas de cliquer sur "Run" pour voir le résultat, l'aperçu ne s'actualise pas automatiquement comme sur Codepen.



avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Lun 5 Fév 2018 - 19:48
J'ai du mal à voir en pratique dans quelles situations on pourrait utiliser ça, je pense que moi je l'utiliserais jamais, ça me perdrait plus qu'autre chose, mais c'est noté, je retiendrais ! o/
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 6 Fév 2018 - 20:09
D'abord je m'excuse d'avoir fait un travail sans plan, c'est parce que je n'ai pas beaucoup de temps et je passe sur le net que quelques minutes par jour c'est aussi pour ça que j'ai signalé mon absence, mais je ne voulais pas complètement disparaitre et vous laissez en attente donc j'ai pensé à donner des informations quand même et faire le plan plus tard.

Donc pour le programme du CSS je le ferais un peu plus tard. J'ai zappé la définition et je suis passée directement aux sélecteurs pour te donner des infos utiles plutôt que de la théorie. On reviendra à l'intro après.

Les sélecteurs :

- les sélecteurs simples : type (balise) / class / id
- le sélecteur universel : ( * {} )
- les sélecteurs d'attributs : [attribut]
- les sélecteurs de descendants : espace
- les sélecteurs d'enfant directs (>) et indirects (*)
- les sélecteurs de voisin (+) et  indirects (~)
- les pseudos classes
- les pseudos éléments


Au fait le sélecteur dépend surtout du code, parfois t'es là à te demander comment cibler cet élément précis sans class vu que ça en vaut pas la peine.

Les sélecteurs de voisins directs (+) que je n'ai jamais utilisé franchement, c'est un peu compliqué mais c'est bon à savoir que ça existe au moins x)

Ce sélecteur permet de sélectionner un élément par rapport à son voisin c'est à dire s'il le suit directement à condition qu'ils soient dans le même élément, c'est à dire qu'ils ont le même parent et qu'ils se suivent.

Les sélecteurs de voisins indirects (~)
Permet de sélectionner un élément par rapport à son frère ou voisin de façon général, c'est à dire tant qu'ils sont dans le même élément parent, peu importe s'il y a d'autres éléments entre eux.

Je te laisse examiner cet exemple pour mieux comprendre.



avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 10 Fév 2018 - 1:22
Je crois que j'ai compris, j'ai juste une question ! Dans ton exemple, si on enlève le deuxième paragraphe, est-ce que le deuxième span sera affecté quand même (par le premier paragraphe) ou il ne sera plus affecté ? En clair est-ce que le sélecteur de voisins indirects permet d'affecter plusieurs voisins ou seulement le premier / plus proche ?

Envoyé depuis l'appli Topic'it
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 10 Fév 2018 - 16:04
Toutes les span seront affectées, n'hésite pas à tester par toi-même sur le code.

Voilà j'ai un peu ajouté des choses :



Peux-tu me dire pourquoi la dernière span n'est pas affectée ?


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Dim 11 Fév 2018 - 21:05
Je pense que c'est parce que le dernier span est dans une div , donc ce n'est plus un voisin de p ?
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Lun 12 Fév 2018 - 17:49
Oui exactement, les voisins devraient appartenir au même quartier à la même balise parente.

On peut également sélectionner un élément ou plusieurs éléments en utilisant l'attribut qui se trouve dans la balise de l'élément bien entendu, de cette façon :

Code:
img[alt] {
  border-radius: 20px;
}
Toutes les images qui ont un attribut alt seront affectées.

Code:
input[type="email"] {
  border: 1px solid red;
}
Tous les champs email auront des bordures rouges.

Code:
a[href*="epicode"] {
  font-size: 14px;
}
Tous les liens dont l'attribut href contient le mot epicode seront affectés

Code:
a[href$=".net"] {
  font-weight: bold;
}
Les liens qui se terminent par .net seront en gras.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Lun 12 Fév 2018 - 21:49
Oh ça a l'air super intéressant ça ! Je retiens ! ♪
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 15 Fév 2018 - 20:03
Oh mais je pensais avoir répondu il y a un moment, désolée Sad

Au fait je voulais te demander si tu connais les pseudos classes, les pseudos éléments et éventuellement la différence entre ceux-ci ?


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 15 Fév 2018 - 22:01
Le nom me dit quelque chose, mais là comme ça, je ne vois pas ce que c'est, non :c
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 16 Fév 2018 - 12:39
Je te donne un exemple courant :hover est une pseudo classe.
Qu'elles sont les autres pseudo classes que tu connais ?


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 22 Fév 2018 - 18:25
Oh ok. Bah je crois bien que je ne connais que :hover ? Il n'y a rien d'autre du style qui me viennent en tête, donc... soit je connais pas, soit ça me revient pas ^^'

Envoyé depuis l'appli Topic'it
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Dim 25 Fév 2018 - 23:29
D'accord :3

Voilà donc un petit aperçu dessus

Une pseudo-classe est un mot ajouté à un sélecteur pour indiquer l'état de l'élément ciblé. La pseudo-classe :hover, comme tu le sais servira pour indiquer que les propriétés seront appliquées à l'élément au survol.

Nous avons des pseudo-classes relatives aux liens :
:link > cible les liens qui n'ont pas encore été visités (par défaut les liens non visités sont bleus)
:visited > lien visité, tu as du remarqué qu'en se basant sur l'historique de navigation les liens visités deviennent par défaut violet.
:active > lien actif, ça dure à peine une seconde mais c'est l'état entre le clic sur le lien et le relâchement de celui-ci

Et des pseudo-classes plus générales

:hover > élément survolé
:focus > quand un élément reçoit le focus, c'est généralement quand on sélectionne une zone de texte ou un champ dans un formulaire.

:first-child > Premier élément fils d'un parent.
:nth-child(n) > on sélectionne l'élément fils n d'un parent, 2 pour le deuxième enfant, 3 pour le 3ème etc.
:last-child > est donc le dernier élément fils par rapport au parent.

Exemple :

Code:
ul li:first-child {color:red;}
Le premier élément de la liste ul sera rouge.

:first-of-type > cible le premier élément de son type indépendamment de sa position.

Exemple :

Code:
span:first-of-type {background-color: blue;}
Le premier élément dans un parent à être un span sera affecté même s'il y a d'autres éléments avant de nature différente.

Nous avons aussi :nth-of-type() pour un nombre spécifique et :last-of-type pour le dernier de son type.

Il existe plusieurs pseudo-classes mais celle-ci sont les plus utilisés sur les forums surtout et les plus susceptibles à rencontrer.
Pour se débarrasser du soulignement des liens par exemple:
Code:
a {
   text-decoration: none;
}
a:link {
   text-decoration: none;
}
a:hover {
   text-decoration: none;
}

Les pseudos-classes -child/ -of-type sont très utiles pour réduire l'utilisation des classes.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 28 Fév 2018 - 23:55
D'accord, j'ai bien compris !
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 3 Mar 2018 - 14:08
Coucou,

Je m'excuse du retard, j'ai pris le temps de te préparer un petit exercice sur les sélecteurs pour te permettre de voir si tu as bien retenu tout ça.

Je sais que tu peux faire le HTML donc je te done directement le code


Voilà donc ce qu'il faut faire :
Au paragraphe dans l'élément li une police de 14px.
Aux éléments fancy une police cursive et la couleur (violet).
Le paragraphe qui porte l'attribut lang une police Courier et une couleur #8c8c8c.
Le 3ème paragraphe (nth(3)) une police de 26px;
Le paragraphe qui suit la div un interligne de 2 et un espacement entre les lettres de 2px.
Le titre h2 dont le nom est fancy une bordure rouge.
La dernière div une marge en bas de 100px.

Voilà comme toujours si tu as des questions je suis là.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 13 Mar 2018 - 23:24
Hum, voila, je crois que c'est bon ? https://codepen.io/anon/pen/eMJGbQ

Je mets le css ici aussi :
Code:
li p {
  font-size:14px;
}

.fancy {
  font-family:cursive;
  color:violet;
}

p[lang] {
  font-family:'Courier';
  color:#8c8c8c;
}

p:nth-of-type(3) {
  font-size:26px;
}

div + p {
  letter-spacing:2px;
  line-height:2;
}

h2.fancy {
  border:red 2px solid;
}

div:last-of-type {
  margin-bottom:100px;
}

En fait je sais pas trop ce qu'est une police cursive... enfin, c'est un type de police, je crois mais donc tu voulais que j'en choisisse une de ce type ? je savais pas trop donc j'ai mis font-family:cursive, ça me met du Comic sans MS du coup, c'est une police cursive ? Enfin, c'est pas très important, huh.

J'ai vraiment beaucoup de mal avec les nth-of-type sinon, mais je crois que j'ai réussit à faire comme il faut, non ?
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Lun 19 Mar 2018 - 15:30
Coucou,

Je m'excuse du retard. J'avais signalé mon absence dans la partie staff mais j'ai oublié de le mentionner dans la partie des cours, désolée.

Je commence par tes questions. Alors une police cursive est une police basique qui est de type manuscrite, elle est reconnue sur tous les ordinateurs et système d'exploitation du coup on utilise généralement ces polices comme alternatif aux polices personnalisés au cas où elles ne chargent pas. C'est tout à fait normal que cursive ressemble à Comic, sans-serif à Arial, serif à Times New Roman et monospace à Courrier. Donc ce sont les polices de base et c'est pourquoi elles portent le même nom que leur type d'écriture pour être facilement reconnues et retenues. Je l'ai un peu expliqué dans ce tutoriel que je te passe au cas où ça pourrait t'apprendre quelque chose de nouveau. Je sais que tu peux très bien gérer les polices de GF.

Pour les nth-of-type, on a un parent qui a un ensemble d'éléments enfants. Ces éléments ne sont pas forcément homogènes, c'est à dire ils ne sont pas de la même nature : on peut avoir des paragraphes, des titres, des listes etc. Quand on utilise nth-of-type on ignore tous les éléments qui ont un type différent de la balise qu'on veut sélectionner. C'est à dire que si je veux sélectionner un titre h2, je vais compter uniquement le nombre des h2 qui le précèdent en ignorant les autres éléments. Donc je peux avoir une succession (titre / paragraphe) par exemple si je veux sélectionner le 3ème titre j'aurais nth-of-type (3). Si je veux par contre utiliser nth-of-child je dois compter tous les éléments du même niveau qui le précèdent, j'aurais donc pour le même exemple nth-of-child (5).

Ceci dit, ton code pour cet exercice est très bien, bravo.

J'ai juste une toute petite remarque qui n'a rien à voir avec les sélecteurs :

Code:
h2.fancy {
  border:red 2px solid;
}

Si tu te rappelles, on a déjà parlé des raccourcis pour les marges et on a dit que l'ordre est important. Sache que pour les bordures aussi, il y a une convention à suivre pour éviter les problèmes d'affichage. Tu dois avoir Firefox comme moi, c'est un navigateur gentil et intelligent donc la plupart du temps on a pas de problème même si le code est un peu incorrect, mais pour les autres navigateurs on ne peut en dire autant. Bref, la bonne transcription est la suivante :
border : border-width border-style border-color;
on aura donc border: 2px solid red;


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 21 Mar 2018 - 14:12
Oui, effectivement j'utilise Firefox, et comme le résultat s'affiche bien comme je veux même quand je met pas dans cet ordre, j'avais pas réalisé que c'était important, j'ai tendance à mettre simplement dans l'ordre dans lequel ça me vient x'3

Je ferais attention :3

Envoyé depuis l'appli Topic'it
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 21 Mar 2018 - 15:11
Il est important à savoir pour bien positionner les éléments ce qu'on appelle "le modèle en boite"

Donc pour résumé tout ça voici un petit schéma :

Spoiler:

Chaque élément est représenté comme une petite boite. La taille réelle de l'élément n'est pas limité par son width / height mais est calculée par la somme :

Largeur = Width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

Donc la hauteur sera calculé de la même façon.

On a vu comment raccourcir l'écriture de la propriété margin, la propriété padding subit la même règle.

La valeur "auto" est utilisée uniquement pour les marges (margin) et doit impérativement être associée à la propriété width, parce que si on ne met pas de largeur le navigateur ne saura pas par rapport à quoi il est censé centrer l'élément.

Une autre différence importante à savoir est que les marges verticales fusionnent. Pour bien illustrer ça, je vais prendre un exemple :

J'ai un conteneur avec deux blocs. Le bloc A a un margin : 10px, le bloc B a un margin : 40px.

- Si je positionne mes deux blocs côte à côte et donc horizontalement, la distance qui sépare mes deux blocs sera de 50px. (Bloc A => margin-right : 10px + Bloc B margin-left: 40px)

- Si je positionne mes blocs verticalement et donc l'un au dessous de l'autre, la distance entre mes deux blocs sera de 40px seulement ! C'est donc la plus grande marge qui l'emporte.

Donc ce sera tout il me semble, si tu as des questions n'hésite pas. Sinon avant de passer au positionnement j'aimerai savoir si tu connais bien la différence entre margin et padding ? As-tu des soucis pour les différencier ?


Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum