Discussion:Tutoriel CSS

combinaison de selecteurs -- Vjollca Ahmeti 7 août 2012 à 19:54 (CEST)

Bonjour,

Cela fait maintenant plusieurs heures que je cherche désespérément une solution. Mon problème :

Je travaille sur la CSS d'un célèbre CMS, ce qui m'empêche de toucher au html. Je veux juste modifier la CSS pour en faire un template "mobile".

Avec Firebug, j'ai repéré un bloc que j'aimerais déplacer et laisser au centre (flaot:none et margin:auto ... parce qu'il y a du contenu au centre que j'ai mis en display:none).

Le truc, c'est que le bloc div en question est contenu dans un autre bloc div qui a une classe générique qui revient sur toute les pages. Cela donne :

<div class="span3">
	<div id="login_block" class="well sidebar-nav">
		contenu
	</div>
</div>

Comme vous pouvez l'imaginer, les attributs de class "well" et "sidebar-nav" sont définis pour tous les blocs de navigation à droite des pages. Et l'attribut de class "span3" sert à définir la largeur de tous les blocs sur la droite (dedans, il peut y avoir plusieurs blocs).

Si dans la CSS je fais :

div.span3 {
	float:none;
	margin:auto;
}

Cela déplace effectivement le bloc comme je le souhaite, mais cela le fait pour toutes les pages, parce que tous les blocs sur la droite ont un parent div avec une classe span3. Moi je veux faire ça uniquement pour le bloc de la page de login.

Si je fais la même chose avec l'id :

#login_block {
	float:none;
	margin:auto;
}

Cela position bien le bloc, mais à l'intérieur du bloc div class="span3" qui est un parent.

J'aimerais donc déplacer le parent div class="span3" entièrement, mais uniquement celui qui a pour enfant le bloc div id="login_block" class="well sidebar-nav".

J'ai essayé (mais ne marche pas):

div.span3 > div#login_block {
	float:none;
	margin:auto;
}

aussi

div.span3 > #login_block {
	float:none;
	margin:auto;
}

aussi

div.span3 > div[id="login_block"]  {
	float:none;
	margin:auto;
}

aussi

div[id="login_block"]:first-child  {
	float:none;
	margin:auto;
}

Et pleins d'autres, pour lesquels j'ai compris pourquoi cela ne marchait pas !

Je ne sais pas comment combiner les sélecteurs pour attribuer des propriétés à un parent avec une classe particulière et qui a un premier enfant avec un id particulier.

Aidez-moi s'il vous plait !

Merci d'avance pour la réponse!

Re: combinaison de selecteurs -- Daniel K. Schneider 8 août 2012 à 12:22 (CEST)

Pas possible à mon avis, cherchez "CSS parent selector" dans google

Ceci dit, sans doute on pourrait bricoler qc. avec JavaScript, mais là il faut avoir accès au code et dans ce cas il serait plus simple d'ajouter une id pour le parent.

Re: Re: combinaison de selecteurs -- Vjollca Ahmeti 8 août 2012 à 14:38 (CEST)

Effectivement ! http://css-tricks.com/parent-selectors-in-css/

Test des liens -- Gaëtan C. Basset (discussion) 2 février 2022 à 22:49 (CET)

Les liens internes et externes ont été testés le 2 février 2022 à 22:49 (CET)

les liens ne fonctionnant plus ou douteux ont été signalé.