28112 sujets

CSS et mise en forme, CSS3

[Résolu] Selecteur d'attributs - modifier

Bonjour,

<div class="bg-Container">
		<div class="b2-TopContent">
			<section class="topContent">
				<p>Ceci est le topContent</p>
			</section>
		</div>
		<div class="b2-MainContent">
			<section class="mainContent">
				<p>Ceci est le mainContent</p>
			</section>
		</div>		
	</div>

Initialement ce qui fonctionnait:

div[class|="bg"] {
	margin: 2rem auto;
	border: solid 1px red;
	padding: 2rem;
	width: 80%;
}
	div[class|="bg"]:after {
		content: "";
		display: table;
		clear: both;
	}

.b2-TopContent,
.b2-MainContent {
	float: left;
	border: solid 1px green;
	padding: 3rem;
	width: 50%;
}
.b2-TopContent {
	clear: left;
	margin-right: 1%;
	width: 25%;
}
.b2-MainContent {
	margin-left: 1%;
	width:50%;
}

Je voulais aussi utiliser un secteur d'attribut, mais là ça ne fonctionne plus si on veut modifier l'une de ses propriétés ( dans mon exemple la propriété width):

div[class|="b2"]{
	float: left;
	border: solid 1px green;
	padding: 3rem;
	width:50%;
}
*/
.b2-TopContent {
	clear: left;
	margin-right: 1%;
	width: 25%;
}
.b2-MainContent {
	margin-left: 1%;
	width:50%;
}


Cordialement
Modifié par cpalo (07 Feb 2017 - 21:38)
Modérateur
bonjour,

c'est parce qu'en ajoutant div, la première déclaration a une plus grande spécificité.

Ainsi il aura la même spécificité que les classes seules:

[class|="b2"]{
	float: left;
	border: solid 1px green;
	padding: 3rem;
	width:50%;
}


p.s. : il existe la possibilité d'utiliser plusieur classes, ce qui est souvent plus propre et facile à relire/maintenir:

<div class="bg container">
</div>


p.s. 2 : pourquoi définir un width générique à deux éléments pour l'écraser ensuite?
Super, ça fonctionne impeccable.

Ton premier PS : c'est ce que je faisais jusqu'à maintenant, et que je continue à faire encore en partie.

Ton second PS: je me crée mon "mini-framework" personnalisé et dans ma grille j'utilise des blocs prédéfinis. Mais il peut arriver que j'ai besoin de modifier par exemple la dimension que j'ai mis par défaut.
Exemple : deux blocs côte à côte de 49% (car 2% de gutter)
Je pourrai vouloir modifier en faisant un bloc de 30% et le second de 68%

Encore merci
Sujet clos
Aller à