28172 sujets

CSS et mise en forme, CSS3

Pseudo-classe de négation :not()

Bonjour,
J'utilise grid-layout.
Par défaut les grid-item enfant de la grid "page" ont une "full-width"

.page {
  display: grid;
  grid-template-columns: [full-start] minmax(1rem, 1fr) [useful-start main-start] minmax(auto, 40rem) [main-end useful-end] minmax(1rem, 1fr) [full-end];
}
.page > * { grid-column: full; }

J'aurai voulu ensuite "automatiser" la largeur "useful" pour les grid-item n'ayant pas un certain nom de classe:

[class|="bg"]:not(.bg-SiteHeader),
[class|="bg"]:not(.bg-Hero),
[class|="bg"]:not(.bg-SiteFooter) {
			grid-column: useful; 
}

Mais cela ne fonctionne pas car sans doute une mauvaise utilisation du :not()

Par contre si je mets seulement :

.page > *:not(.bg-SiteHeader) { grid-column: useful; }

Cela fonctionne bien pour seulement cette classe mais pas lorsque je veux cumuler deux classes.

Merci d'avance pour votre aide
Modifié par cpalo (13 Nov 2018 - 14:10)
Erreur de frappe pour le forum
Mais dans la réalité il n'y en a pas..
Je corrige donc le code mis en ligne sur le forum
Modérateur
Du coup, ce ne serait pas un problème de poids des sélecteurs ?
Je ne sais plus dire si la class contenue dans le not() compte ou pas dans le calcul…
la pseudo-class ;not() compte 0 mais la classe contenue dans :not() compte1.

Petite erreur pour poser le problème: je ne veux pas cumuler deux classes.
Je voudrai appliquer une classe sur des éléments ayant une classe commençant par bg- sauf pour trois d'entre eux ( cf le code ci-dessus)
Je n'ai pas essayé avec la grid, j'ignore la syntaxe que tu utilises, mais avec color il n'y a pas de souci :
.page > div:nth-of-type(2n) { background-color: #eee; }
.page > div:not([class|="bg"]) { color: red; }
.page > div[class|="bg"]:not(.bg-SiteHeader):not(.bg-SiteFooter) { background: moccasin; }
Voir démo :
https://codepen.io/bazooka07/pen/BGpOgq
Modifié par bazooka07 (13 Nov 2018 - 19:40)
Meilleure solution
Merci Jean-Pierre ta syntaxe fonctionne:

.page > [class|="bg"]:not(.bg-SiteHeader):not(ng-Hero):not(.bg-SiteFooter) { grid-column-useful;)

Cordialement

.page > * { grid-column: full; }
.page > [class|="bg"]:not(.bg-TopHeader):not(.bg-PrimaryNav):not(.bg-Hero):not(.bg-SiteFooter) { 
	grid-column: useful;
	color:red;
}
.page .bg-MainContent	{ grid-column: main; grid-row: main; color: green;}

la classe sur bg-MainContent n'est pas prise en compte

<body class="page">
<header class="bg-TopHeader">
	<section>Header</section>
</header>
<nav class="bg-PrimaryNav">PrimaryNav</nav>
<section class="bg-Hero">Hero</section>
<main class="bg-MainContent">
	<article>Content</article>
</main>
<section class="bg-Sidebar">Sidebar</section>
<section class="bg-Extras">Extras</section>
<section class="bg-Ads">Ads</section>
<footer class="bg-SiteFooter">
	<section>Footer</section>
</footer>
Modérateur
Elle est prise en compte, mais sa spécificité étant beaucoup plus basse (0020), elle est écrasée par la première définition (0060).
Modifié par kustolovic (14 Nov 2018 - 13:30)
Sujet clos
Aller à