Liste de définition

Bonjour,

voila j'ai une liste de cette forme :

<dl>
<dt>un contenu</dt>
<dt>un contenu</dt>
<dd>un contenu</dd>
<dd>un contenu</dd>
<dt>un contenu2</dt>
<dt>un contenu2</dt>
<dd>un contenu2</dd>
<dd>un contenu2</dd>
</dl>

via les selecteurs css j'aimerai sélectionner que le premier dt de chaque sans avoir a ajouter une class sur le premier dt comme ci-dessous:

<dl>
<dt class="first">un contenu</dt>
<dt>un contenu</dt>
<dd>un contenu</dd>
<dd>un contenu</dd>
<dt class="first">un contenu2</dt>
<dt>un contenu2</dt>
<dd>un contenu2</dd>
<dd>un contenu2</dd>
</dl>

Est-ce possible ?

Bonjour,

Ce n'est possible, avec l'utilisation de sélecteurs CSS avancés (recherche google), que s'il y a un pattern régulier dans tes dt dd.

Par contre, au vu de l'exemple que tu donne, j'ai la forte impression que tu n'utilises pas les listes de définitions correctement.

Laurie-Anne a écrit :
Bonjour,

Ce n'est possible, avec l'utilisation de sélecteurs CSS avancés (recherche google), que s'il y a un pattern régulier dans tes dt dd.

Par contre, au vu de l'exemple que tu donne, j'ai la forte impression que tu n'utilises pas les listes de définitions correctement.

Il n'y a pas de pattern régulier sur les dd

Alors la seule solution sera, pour le moment, de placer à la main une classe.

Salut,

Si j'ai bien compris ta question, il y a moyen comme ça :

dl.test dd + dt { /* Permet de cibler les <dt> qui suivent immédiatement un <dd> */ }	
dl.test dt:first-child { /* Permet de cibler le tout premier <dt> */ }

Donc :

dl.test dd + dt,
dl.test dt:first-child { /* Styles pour les premiers <dt> */ }

Documentation :
Sélecteur d'enfant adjacent (A + B)
Pseudo-classe :first-child
Modifié par BeliG (28 Apr 2010 - 17:12)

Laurie-Anne a écrit :
Alors la seule solution sera, pour le moment, de placer à la main une classe.

Ok merci Laurie-Anne. Sinon pour répondre a ton interrogation sur le bon usage de ma liste je peut t'en dire un peu plus car je suis moi même septique. Ma liste est une liste de concours gagné a travers les années et les pays.

Voici l'exemple

<dt>2008</dt>
<dt>France</dt>
<dd>Grand prix du festival 1 </dd>
<dd>Grand prix du festival 2 </dd>
<dd>Grand prix du festival 3 </dd>
<dt>USA</dt>
<dd>Grand prix du festival 1 </dd>
<dd>Grand prix du festival 2 </dd>
<dt>2007</dt>
etc...

En y réfléchissant je pense que j'aurai pu utiliser une liste ul dans un seul dd comme ca on a un pattern régulier ? Qu'en penses-vous ?

Oui, effectivement des listes imbriquées ou des listes réparties sous plusieurs Hn serait plus appropriées.

Personnellement, je recommanderais :

<hn>2008</hn>
<hn+1>France</hn+1>
<ul>
<li>Grand prix du festival 1 </li>
<li>Grand prix du festival 2 </li>
<li>Grand prix du festival 3 </li>
</ul>
<hn+1>USA</hn+1>
<ul>
<li>Grand prix du festival 1 </li>
<li>Grand prix du festival 2 </li>
</ul>
<hn>2007</hn>

Laurie-Anne a écrit :
Oui, effectivement des listes imbriquées ou des listes réparties sous plusieurs Hn serait plus appropriées.

Héhé.

Personnellement Parmenion, je ne trouve pas ta solution si incohérente que ça, et si c'était pour garder la liste <dl>, je l'aurais fait plutôt comme ça :

<dl>
	<dt>2008</dt>
	<dd>
		<hn>France</hn>
		<ul>
			<li>Grand prix du festival 1</li>
			<li>Grand prix du festival 2</li>
			<li>Grand prix du festival 3</li>
		</ul>
		<hn>USA</hn>
		<ul>
			<li>Grand prix du festival 1</li>
			<li>Grand prix du festival 2</li>
			<li>Grand prix du festival 3</li>
		</ul>
	</dd>
</dl>

A titre informatif, il me semble même avoir déjà vu une construction comme ça dans le brouillon de la doc HTML5 :

<dl>
	<dt>2008</dt>
	<dd>
		<dl>
			<dt>France</dt>
			<dd>Grand prix du festival 1 </dd>
			<dd>Grand prix du festival 2 </dd>
			<dd>Grand prix du festival 3 </dd>
			<dt>USA</dt>
			<dd>Grand prix du festival 1 </dd>
			<dd>Grand prix du festival 2 </dd>
		</dl>
	</dd>
</dl>

Et je connais des oufs de la liste <ul> (presque autant que moi avec <dl> ) qui pourraient te proposer quelque chose comme ça :

<ul> 
    <li>
		<hn>2008</hn>
		<ul>	
			<li>
				<hn+1>France</hn+1>
				<ul> 
					<li>Grand prix du festival 1</li> 
					<li>Grand prix du festival 2</li> 
					<li>Grand prix du festival 3</li> 
				</ul> 					
			</li>
			<li>
				<hn+1>USA</hn+1>
				<ul> 
					<li>Grand prix du festival 1</li> 
					<li>Grand prix du festival 2</li> 
					<li>Grand prix du festival 3</li> 
				</ul> 					
			</li>
		</ul>
	</li>
</ul>

Si Florent passe par là, je vais encore prendre cher...
Modifié par BeliG (28 Apr 2010 - 17:54)

Merci BeliG pour ces exemples. Je vais retravailler ma structure. L'idée des titres pour les pays je n'aime pas par contre cette structure me plait bien

<dl> 
    <dt>2008</dt> 
    <dd> 
        <dl> 
            <dt>France</dt> 
            <dd>Grand prix du festival 1 </dd> 
            <dd>Grand prix du festival 2 </dd> 
            <dd>Grand prix du festival 3 </dd> 
            <dt>USA</dt> 
            <dd>Grand prix du festival 1 </dd> 
            <dd>Grand prix du festival 2 </dd> 
        </dl> 
    </dd> 
</dl>

Hello Quentin,

QuentinC a écrit :
Si on en dresse la liste, on va inévitablement avoir un truc du genre France, USA, France, USA, France, USA.

Tu peux expliciter ?

Structurellement parlant, les méthodes évoquées se basent sur la même idée hiérarchique, y compris celle que tu recommandes :

<!-- DT + HN -->

<dt>
	<hn>
		<ul>
	<hn>
		<ul>
<dt>
	<hn>
		<ul>
	<hn>
		<ul>
	
<!-- HN + HN+1 -->

<hn>
	<hn+1>
		<ul>
	<hn+1>
		<ul>
<hn>
	<hn+1>
		<ul>
	<hn+1>
		<ul>
	
<!-- DT + DT -->
		
<dt>
	<dt>
		<dd>
	<dt>
		<dd>
<dt>
	<dt>
		<dd>
	<dt>
		<dd>

<!-- L'indentation n'est pas rigoureuse, mais je trouve que c'est plus parlant comme ça -->

Alors j'avoue que j'ai du mal à comprendre...
Modifié par BeliG (29 Apr 2010 - 09:34)

On ne peut pas mettre d'éléments de type block dans un dt.

Je crois que QuentinC parlait du sommaire que l'on peut activer avec un lecteur d'écran pour se balader de titres en titres.

Pour le problème de notre ami, on n'est pas dans le cadre terme(s) + définition(s), donc on utilisera une hiérarchie de titres.
Modifié par Patidou (29 Apr 2010 - 10:23)

Patidou a écrit :
On ne peut pas mettre d'éléments de type block dans un dt.

Regarde bien, il n'y a aucun <hn> dans les <dt>.

Patidou a écrit :
Pour le problème de notre ami, on n'est pas dans le cadre terme(s) + définition(s), donc on utilisera une hiérarchie de titres.

Ah, y a encore des gens qui croient que <dl> ne sert qu'à ça ?

Là, on est plus dans une réflexion sémantique basée sur la liste de description (HTML5) que sur la liste de définition (HTML4).

Au passage, jetez un œil à cet article qui date de 2004.
Modifié par BeliG (29 Apr 2010 - 11:36)

a écrit :
Je crois que QuentinC parlait du sommaire que l'on peut activer avec un lecteur d'écran pour se balader de titres en titres.

Oui, mais pas uniquement. Une hiérarchie de titres cohérente profite à bien d'autres outils. Ca peut servir à faire un plan ou une table des matières, découper une longue page en plusieurs petites, récupérer/traiter/trier des données spécifiques à un pays ou une année précise, .... ce n'est pas uniquement une histoire d'accessibilité, ça va beaucoup plus loin que ça. Soyons logique : si dans une table des matières tu as plusieurs fois le même titre sous le même parent, il y a un problème de cohérence (ou alors tu as voulu faire un effet de style)

QuentinC a écrit :
si dans une table des matières tu as plusieurs fois le même titre sous le même parent, il y a un problème de cohérence (ou alors tu as voulu faire un effet de style)

Je suis tout à fait d'accord, mais dans les schémas proposés à aucun moment il n'y aura plusieurs fois le même titre dans la même section :

2008
	France
	USA
2007
	France
	Bangladesh
etc.

a écrit :

Je suis tout à fait d'accord, mais dans les schémas proposés à aucun moment il n'y aura plusieurs fois le même titre dans la même section : 2008 
    France 
    USA 
2007 
    France 
    Bangladesh 
etc.

Si, justement dans le cas où les années sont en dt et les pays en hn. Du texte dans un dt n'est pas un titre, il ne peut pas être considéré comme tel. Le problème pourrait se résoudre facilement si on pouvait écrire <dt><hn>...</hn></dt>, mais en l'occurence on ne peut pas (de toute façon même si on pouvait, la structure en dl/dt/dd serait alors complètement superflue)

Suis pas fan des structures excessivement tarabiscotées avec des listes imbriquées, quel que soit le type de liste. Circonstances agravantes si on utilise DL (même si HTML5 veut en élargir la portée, mais je suis pas convaincu pour des machins imbriqués), ou encore une combinaison de listes imbriquées et de titres de section.

Des titres HN, en bout de course des paragraphes ou des UL suivant les besoins, et ça roule.

BeliG a écrit :
Si Florent passe par là, je vais encore prendre cher...

Oui, ça ne va pas manquer. Donc:

Comme dit par Quentin, ça c'est pas logique car on utilise des titres tout en sautant un niveau de titre (remplacé par des DT), ça fait un trou dans le plan du document:

<dt> 
    <hn> 
        <ul> 
    <hn> 
        <ul> 
<dt> 
    <hn> 
        <ul> 
    <hn> 
        <ul>

Par contre ça peut marcher dans l'autre sens, avec les HN en amont:

<hn> 
    <dt> 
        <ul> 
    <dt> 
        <ul> 
<hn> 
    <dt> 
        <ul> 
    <dt> 
        <ul>

Florent V. a écrit :
Oui, ça ne va pas manquer. Donc:

upload/2043-prendre-che.jpg

Héhé, bien joué.

Florent V. a écrit :
Comme dit par Quentin, ça c'est pas logique car on utilise des titres tout en sautant un niveau de titre (remplacé par des DT), ça fait un trou dans le plan du document

D'accord avec vous deux sinon, je ne l'avais pas vu sous cet angle...

Florent a écrit :

<hn>  
    <dt>  
        <ul>  
    <dt>  
        <ul>  
<hn>  
    <dt>  
        <ul>  
    <dt>  
        <ul>

A ceci près qu'un élément dl ne peut pas contenir autre chose que dt et dd. Donc ça devrait plutôt être ça (à moins que j'aie mal compris ton exemple) :

<hn>...</hn>
<dl>
<dt>...</dt>
<dd>
<ul>...</ul>
</dd>
</dl>
<hn>...</hn>
<dl>...</dl>

Mais bon, c'est quand même moins bien que hn, hn+1, ul, hn+1, ul, ...
A la rigueur ce serait une solution pas trop moche si n=6 puisque h7 n'existe pas.