28172 sujets

CSS et mise en forme, CSS3

Selectionner le li de 1er niveau uniquement

Bonjour,
Je génère via une fonction récursive en php une liste imbriquer de ol li.
En voici un échantillon :
<ol>
	<li>Menu 1
		<ol>
			<li>Sous Menu 1</li>
			<li>Sous Menu 2</li>
			<li>Sous Menu 3
				<ol>
				<li>Sous sous Menu 1</li>
				<li>Sous sous Menu 2</li>
				</ol>
			</li>
			<li>Sous Menu 4</li>
			<li>Sous Menu 5</li>
			<li>Sous Menu 6</li>
			<li>Sous Menu 7</li>
			<li>Sous Menu 8</li>
		</ol>
	</li>
	<li>Menu 2
		<ol>
			<li>Sous Menu 1
				<ol>
					<li>Sous sous Menu 1</li>
					<li>Sous sous Menu 2</li>
				</ol>
			</li>
			<li>Sous Menu 2</li>
			<li>Sous Menu 3</li>
			<li>Sous Menu 4</li>
			<li>L'Sous Menu 5</li>
		</ol>
	</li>
</ol>


La question est comment faire pour appliquer un css uniquement au li de premier niveau (Sites web, Solutions digitales), mais sans mettre une class (si possible) ?

A partir de là comment afficher cette liste en colonne (ici 2 colonnes) et faire en sorte que si la largeur devient trop important (+ de colonne ou une arborescence plus profonde) cela passe en dessous ?

Merci de votre aide
Modifié par christobal (27 Aug 2013 - 16:28)
Administrateur
Suggestion : mettre tout de même une classe sur le premier <ol> puis 
ol.maclasse>li

Modifié par dew (26 Aug 2013 - 11:20)
Sans mettre de classe implique de remonter plus haut dans la hiérarchie de ton code HTML. Comme tu n'as donné que ce bout de code, on ne peut pas trop deviner.
Ça serait dans le genre
body>ol>li

pour peu que ton <ol> soit enfant directe de <body>.
Si non comme suggéré je mettrais aussi une classe au premier <ol> pour faciliter la sélection, en fait, je mettrais même un ID.
Merci pour vos réponses.
Donc voici ou j'en suis.
niveau html, voici ce que cela donne :
<div id="nomenclature">
<ol>
	<li>Menu 1
		<ol>
			<li>Sous Menu 1</li>
			<li>Sous Menu 2</li>
			<li>Sous Menu 3
				<ol>
				<li>Sous sous Menu 1</li>
				<li>Sous sous Menu 2</li>
				</ol>
			</li>
			<li>Sous Menu 4</li>
			<li>Sous Menu 5</li>
			<li>Sous Menu 6</li>
			<li>Sous Menu 7</li>
			<li>Sous Menu 8</li>
		</ol>
	</li>
	<li>Menu 2
		<ol>
			<li>Sous Menu 1
				<ol>
					<li>Sous sous Menu 1</li>
					<li>Sous sous Menu 2</li>
				</ol>
			</li>
			<li>Sous Menu 2</li>
			<li>Sous Menu 3</li>
			<li>Sous Menu 4</li>
			<li>L'Sous Menu 5</li>
		</ol>
	</li>
</ol>
</div>

Pour le css, j'ai fait cela :
#nomenclature > ol {overflow: hidden;padding: 0;width: 100%;}
#nomenclature li {float: none;list-style: none outside none;}
#nomenclature .mere {float: left;margin: 0 10px;width: auto;}
#nomenclature .checkbox {margin: 0 0 3px;}

Sur le principe le résultat est bien, mais les li avec la class="mere" ne se mettent pas toutes les unes a coté des autres.
Par exemple dans mon cas " Sites web", "Solutions Digital et Imprimés enrichis" sont bien à coté les uns des autres.
Par contre "L'entreprise" est en dessous "Imprimés enrichis", ...
Modifié par christobal (27 Aug 2013 - 16:29)
Dans ce cas il suffit juste de mettre
#nomenclature>ol>li

pas la peine de surcharger de classes inutilement.
Pas la peine non plus de mettre un "width:100%" à ton <ol> et si ton dernier <ol> est comme ça, c'est sûrement parce qu'il n'y a plus assez de place (largeur) pour le contenir.
Zelalsan : c'est sûrement parce qu'il n'y a plus assez de place (largeur) pour le contenir.

Je pense aussi la même chose, mais dans ce cas comment forcer le retour à la ligne ?
C'est bien comme ça que ça se passe sauf que tes éléments sont en float, donc ils auront le comportement que tu vois.
Le mieux serait de mettre tes <li> en "display:inine-block"
Sujet clos
Aller à