28122 sujets

CSS et mise en forme, CSS3

[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
connecté
Modérateur
Salut,

Soit ce contexte :

<div class="abc">
    <h1></h1>
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>
    <p></p>
    <a href=""></a>
    <div><p></p></div>
</div>


le css (le p à l'intérieur du div héritera de certains styles)

.abc > *{
    color:red;
    border: 1px solid teal;
}

ou

.abc > h1,
.abc > h2,
.abc > h3,
.abc > h4,
.abc > h5,
.abc > h6,
.abc > p,
.abc > a,
.abc > div{
    color:red;
    border: 1px solid teal;
}

Modifié par niuxe (10 May 2024 - 00:24)
Meilleure solution
Ok merci beaucoup Niuxe, vais essayer demain (le * en premier lieu, small is beautifful Smiley smile )
Modifié par 3RIC (10 May 2024 - 00:36)
connecté
Modérateur
Olivier C a écrit :
Bonsoir. Pour info :

Avec ça, vous toucheriez les titres &lt;h1&gt; 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)
Modérateur
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)
connecté
Modérateur
gcyrillus a écrit :
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


Roooo, comment n'y ai-je pas pensé Smiley confused ? Bien vu et merci pour ce petit rappel Smiley smile
Modifié par niuxe (10 May 2024 - 13:17)
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);
    }
}
Modérateur
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 Smiley cligne 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 Smiley decu 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 Smiley sweatdrop .
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 Smiley good
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)
Prévenir un modérateur
Répondre au sujet
Aller à