Discussion :

[pierrot10]

Bonjour à tous

J'ai un sous menu à deux niveaux, mais dans certain cas il ne peut avoir qu'un niveau.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<ul id="submenu1">
<li class="level1"><a href="alevel1">1</a></li>
<li class="level1"><a href="alevel1">2</a></li>
</ul>

Dans ce cas, .alevel1 ne doit pas être en gras

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<ul id="submenu1">
<li class="level1"><a href="alevel1">2</a>
<ul>
<li class="level2"><a href="alevel2">22</a></li>
</ul>
</li>
</ul>

Dans ce cas, .alevel1 doit être en gras.

Est-ce possible en CSS de faire une condition du genre?

si ..alevel1 contient un enfant alors gras
si non alors normal


Milles mercis pour vos lumières

[NoSmoking]

Bonjour,
si on analyse ces deux morceaux de code
code #1 :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<li class="level1">
    <a href="alevel1">1</a>
</li>

code #2 :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<li class="level1">
    <a href="alevel1">2</a>
    <ul>
        <li class="level2"><a href="alevel2">22</a></li>
    </ul>
</li>

on peut voir que :

• dans code #1 l'élément <a> est enfant unique de l'élément <li> ;
• dans code #2 l'élément <a> n'est pas enfant unique de l'élément <li>, il y a également un élément <ul>.

En CSS mettre en gras un élément enfant unique on écrirait la règle suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
element:only-child {
  font-weight: 700;
}

et comme on veut l'inverse il suffit d'écrire la règle« complémentaire » suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
element:not(:only-child) 
  font-weight: 700;
}

Ressources :

• La pseudo-classe :only-child (sur MDN)
• La pseudo-classe de négation, :not() (sur MDN)

[pierrot10]

Bonjour NoSmoking

Merci beaucoup et désolé de revenir aussi tard. J'étais occupé sur une autre priorité.

C'est super intéressant et ca marche bien, merci.
Mais est-ce que l'on peut aussi faire un truc du genre avac un élément qui n'est pas enfent direct.

Sur cette exemple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<p>Si il y a une liste avec a paragraphe, le paragraphpe ne doit pas avoir de margin</p>
<ul>
<li class="level1">
    <a href="alevel1">2</a>
    <ul>
        <li class="level2"><a href="alevel2">22</a></li>
    </ul>
</li>
<ul>

Les listes sont logiquement espacée des paragraphes, parce que le p ont un margin-bottom par défaut. Mais nous aimerions que les listes reste "collées" au paragraphe, c'est à dire sans espacement, soit un espacement égal qu'un texte<br>
Est-ce aussi possible d'agir sur le margin-bottom des p s'ils sont suivis par un <ul>?

Ou dois-je le faire avec jquery, ce que j'aimerais éviter.

Mercis pour tes lumières

[NoSmoking]

Est-ce aussi possible d'agir sur le margin-bottom des p s'ils sont suivis par un <ul>?

Le C de CSS vaut cascade, on n'est pas des saumons et dans l'état actuel on ne sait pas remonter la cascade, mais peut-être dans un avenir proche.

Par contre suivant le même schéma que précédemment tu peut cibler les <ul> qui suivent des <p>.

Sachant que les éléments <p> et <ul> ont par défaut, dixit https://html.spec.whatwg.org/multipage/rendering.html, les valeurs de marge suivantes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
dir, dl, menu, ol, ul { 
  margin-block-start: 1em;
  margin-block-end: 1em;
}
blockquote, figure, listing, p, plaintext, pre, xmp {
  margin-block-start: 1em;
  margin-block-end: 1em;
}

... tu peux toujours jouer sur la propriété margin de ces éléments pour arriver à tes fins.

En prenant le problème à l'envers, encore une fois, tu peux cibler le <ul> qui sont frères adjacents à un <p> pour supprimer sa marge haute.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
p + ul {
  margin-top: -.5em;   /* ou -1em pour coller */
}

[pierrot10]

Super, merci beaucoup et belle journée