[Résolu] Quels selecteurs et leur disposition ?

Bonsoir. Pour info :

3RIC a écrit :
- .ABC + h1

Avec ça, vous toucheriez les titres <h1> APRÈS la div.ABC

Bonjour,

Il y a aussi les pseudo-class https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes qui pour certaines peuvent regrouper des selecteurs (:not(),:has(),:is(),..)


par exemple: https://developer.mozilla.org/fr/docs/Web/CSS/:is / https://caniuse.com/css-matches-pseudo

.ABC > :is(h1,h2,h3,h4,h5,h6,p,a) {
	background-color:	var(--clr2);
	}

ou avec une spécificité moindre: https://developer.mozilla.org/fr/docs/Web/CSS/:where / https://caniuse.com/mdn-css_selectors_where

.ABC > :where(h1,h2,h3,h4,h5,h6,p,a) {
	background-color:	var(--clr2);
	}

sont alors exclus, ceux qui ne pas déclaré au travers de la pseudo-class.


Cordialement
Modifié par gcyrillus (10 May 2024 - 11:12)

Mathieuu a écrit :
Salut,

pour le coup cela me semblerait plus "intuitif" de faire du css nested dans ce cas la :

.ABC {
    h1,h2,h3,h4,h5,h6,p,a {
        background-color: var(--clr2);
    }
}

Oui, c'est vrai que le support est plutôt bon aujourd'hui et qu'il faut aussi le mentionner!

Intuitif, je ne suis pas sur pour un débutant.

Cdt

Edit: témoignage pour l'intuition j'ai un collègue cuisinier qui s'est lancé , l'an dernier, dans une formation payante en ligne dont je tairai le nom. Après ses 200 heures de cours en ligne, il n'arrive toujours pas à créer une page html et sa feuille de styles. Il me dit comprendre les cours , mais sans réussir à les mettre en application. Bref il fait un beau mélange et n'arrivepas à assimiler grand chose.J'ai tenter de l'aider, mais entre 2 discussions c'est compliqué. il reste confus car pas encore capable de distinguer et de différencier les langages,leurs usages et leurs syntaxes html,css,bootstrap,sass,js,php,sql, et toute la serie des autre promis par la formation. Il y a même des volet wordpress, symphonie, react,vues.
Faut dire que sa formation se fait en solo en dehors de son job à plein temps de cuisinier et qu'il est parti avec 0 connaissance, il n'arrive pas à avoir de prof ou de soutien de la part de cette école de formation qui a vider son compte formation et qui lui donne déjà ses dates d'examen.! Il n'est évidemment pas devenu développeur en 200 heures en partant de zéro.

En ayant eu un aperçu des contenus des cours, cela peut-être intéressant pour quelqu'un déjà familier avec le développement Web ou la programmation dans le cadre d'une montée en compétences ou d'une VAE. Cela m'a presque tenter. Pour un vrai débutant, faut être tres motivé et ne pas travailler à temps complet en même temps et ajouter à ces 200 heures de bases un autre bon millier d'heures de travail et recherches perso pour s'y faire.
Modifié par gcyrillus (14 May 2024 - 13:44)

Les trucs plus compliqués (et qui utilisent le &) ne sont pas forcement tous super intuitif .
Mais pile pour ce cas là, je trouve que c'est relativement clair directement via la structure qui représente bien les h1,h2... qui sont à l’intérieur d'un .ABC
Modifié par Mathieuu (14 May 2024 - 11:59)

Merci beaucoup à vous tous pour vos retours, j'ai appris quelques trucs au passage, en l'occurence cette mise en forme qui me parle bien :

.ABC {
    h1,h2,h3,h4,h5,h6,p,a {
        background-color: var(--clr2);
    }
}

Sinon je suis parti sur :

.abc > *{
...
}

et ça le fait très bien, merci.

Je passe en résolu.
Modifié par 3RIC (14 May 2024 - 18:56)