No video :(

Les nouvelles pseudo-classes :is() et :where() en CSS

Подписаться 61 тыс.

Просмотров 4,6 тыс.

50% 1

🎓 Formez-vous avec l'École du Web : www.ecole-du-w...
📚 Ou suivez mes cours sur UDEMY : liste-des-cour...
🚀 1 Cours gratuit en t'abonnant à ma newsletter :
www.le-designe...
--------------------------------------------------------------------------------------------
Rejoins la communauté pour partager et/ou obtenir de l’aide sur :
► Discord : / discord
Suis-moi également sur mes réseaux anglophones :
► RU-vid : / thewebschool
❓ Si tu veux que je fasse une vidéo sur un sujet en particulier, dis-le moi dans les commentaires !

Опубликовано:

28 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 22

@medaillonet 3 месяца назад

J'avoue que le ":is(ol, ul) :is(ol, ul) ol" est très explicite 🧠🙇‍♂😅 Merci encore pour ce point CSS, simple et efficace, comme dab' ! 👍 J'utilise assez souvent le :is "collé" perso, très utile. Par contre la "meilleure" (ou plutôt moins contraignante) spécificité grâce au :where, je n'y avais jamais prêté attention, merci !

@CompagnonDeCode 3 месяца назад

Toujours au top tes vidéos Enzo ! Merci pour le partage !

@FrancoisLecroart 3 месяца назад

Sympa comme vidéo. Merci pour la découverte. Pour ton exemple sur la spécificity. J'aurais plutôt jouer sur le sélecteur que sur le !important qui lui va écraser quoi qu'il arrive le sélecteur et donc n'a rien a voir avec la spécificité. Un exemple plus concret aurait été du mettre comme sélecteur div.container pour l'un et .container pour l'autre, et on aurait vue que le plus spécifique est pris en priorité, qu'il soit avant ou après l'autre règle. Pour ce qui est de la simplicité, je suis pas fan non plus de cette exemple. Si c'est pour faire un :is(h5).hero le plus simple c'est directement h5.hero ^^. Sinon, mettre les pseudo class à la fin est très classique et je trouve ça moins perturbant. J'ai jamais vue dans du code un :focus.btn par exemple.

@EcoleduWeb 3 месяца назад

Salut et merci pour ton commentaire ! J'aurais pu être un peu plus précis sur ces points là en effet. 👌

@Picode91 3 месяца назад

Super Vidéo 😄

@didier..n..1567 3 месяца назад

Bonjour, Enzo je voulais te demander j'ai remarquer sur t'on école de formation que tu as retiré la formation svelte il me semble c'est dommage ou alors tu là inclus dans l'abonnement. Merci pour les infos sur :is :where

@EcoleduWeb 3 месяца назад

Bonjour, en effet, elle est au garage pour l’instant, en train de subir une révision 🙏

@djxanimationetfilmamateur1900 3 месяца назад

Merci pour le tuto j'aimerais savoir si une mise à jour du navigateur pourrait permettre d'avoir les nouveautés

@EcoleduWeb 3 месяца назад

Ces fonctionnalités sont déjà supportées 👍

@alphastar5626 3 месяца назад

Euh sinon yavait aussi le signe "+" quon pouvait utiliser en mode "header h1 + p + span + a + button". Donc je vois pas trop a quoi sert le "is"

@EcoleduWeb 3 месяца назад

Je crois que tu te méprends, "+" sert à sélectionner un élément qui en suit un autre. :is() sert à sélectionner une liste d'éléments plus facilement.

@marcelehuyambianguessan5510 3 месяца назад

Je voudrais savoir si ces nouveaux pseudo element sont pris en charge automatiquement par sass ?

@EcoleduWeb 3 месяца назад

Oui, SASS convertit du SASS en CSS, quelle que soit la pseudo classe.

@SaveCount-bh8tp 3 месяца назад

Ne te compares pas avec lui , chacun a sa vision

@skr182 3 месяца назад

C'est qui lui??

@SaveCount-bh8tp 3 месяца назад

@@skr182 c'est Gnabro

@EricFressange 3 месяца назад

Salut, je n'ai pas encore eu à utiliser :where. Par contre :is je l'utilise pour savoir si mes card sont des liens ce qui me permet d'appliquer l'effet hover sur mes card que si se sont des liens .card:is(a):hover {...}

@EcoleduWeb 3 месяца назад

Merci pour ton message. Mais vu qu'il n'y a qu'un élément dans ton :is(), pourquoi ne pas simplement utiliser : a.card:hover {} ?

@EricFressange 3 месяца назад

@@EcoleduWeb oui pardon j'ai oublié de préciser je bosse en scss, du coup la vraie syntaxe c'est .card { ... &:is(a):hover {...} }

@EricFressange 3 месяца назад

Mais normalement oui je devrais faire a.card:hover{...} Et je viens de me rendre compte en te répondant qu'il y a une autre manière qui m'évite le :is .card { &[href]:hover {...} }

@EcoleduWeb 3 месяца назад

@@EricFressange Ça revient au même, regarde dans ton CSS compilé. 👍 .card:is(a):hover { color: red; }