[Résolu] Quels selecteurs et leur disposition ?

Salut,

J'en viens à vous après avoir essayé tant de combinaisons possibles, cherché sur la toile mais rien pour dire comment en combinant (...), en vain.

Cas de figure :
- Soit un div du nom de ABC
- Et differents elements : H1, H2...p..a etc.

Je souhaite que tous les éléments compris dans ce div soit en "clr2".
Un exemple de combinaison parmi toutes les autre, juste pour exrpimer l'idée :

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

En fait, c'est bon pour les :
- .ABC > h1
- .ABC + h1
- .ABC h1
- etc.

Mais quid en associant tous les styles ?

Merci beaucoup aux éventuels retours ça me dépannerait énormément,
Eric

Olivier C a écrit :
Bonsoir. Pour info :

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

+1

Ce qui donne ce contexte :

<div class="abc">
<!-- etc. -->
</div>
<h1>un titre niveau 1</h1>

Petite piqure de rappel : Sélecteurs CSS
Modifié par niuxe (10 May 2024 - 10:53)

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)

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);
    }
}

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)