[Résolu] Cherche sélecteur

Bonsoir

J'ai un certain nombre de balises <section> dans une page.
La plupart contiennent un <header> et un ou plusieurs <p>.
Il y a parfois parmi elles des balises qui ne contiennent que le <header>.
Exemple:

<section>
    <header><!-- première section --></header>
    <p>...</p>
    <p>...</p>
    ...............
</section>
<section>
    <header><!-- deuxième section --></header>
</section>
<section>
    <header><!-- troisième section --></header>
    <p>...</p>
    <p>...</p>
    ...............
</section>

Question: existe-t-il un sélecteur qui permette d'attribuer une valeur particulière d'attributs à la deuxième section, basé bien entendu sur le fait qu'elle ne contient que le <header>?
Modifié par PapyJP (15 Jan 2016 - 19:50)

Bonsoir,

À l'heure actuelle, il est impossible (en tout cas pas compatible) de sélectionner un élément selon son contenu.

Il est possible de cibler le <header> seul à l'aide de "header:only-child" ou "header:only-of-type", ou bien de cibler un <section> vide à l'aide de "section:empty", mais ce que tu demandes n'est pas encore réalisable en CSS.

C'est prévu et cela s'appelle :has, mais n'est pas encore implémenté par les navigateurs : http://www.ericponto.com/blog/2015/01/10/has-pseudo-class-parent-selector/

EDIT : du coup actuellement, la meilleure solution demeure JS ou jQuery
Modifié par Raphael (15 Jan 2016 - 20:01)

bonjour,

quel type de style veut tu injecter a ton section s'il ne contient qu'un header ?

Si c'est un habillage de fond ou de bordure il peut y avoir une astuce simple avec un truc que l'on te propose souvent .... un pseudo element !

Si c'est le header, il y a section header:last-child { /* ne s'applique qu'au dernier element si celui-ci est header */} , fonctionne si il est le seul enfant, mais fonctionne aussi si il est le dernier enfant d'une grande famille.

edit : exemple improbable http://codepen.io/anon/pen/BjwRVy & http://codepen.io/anon/pen/XXeRBz
Modifié par gc-nomade (15 Jan 2016 - 21:38)

En fait c'est du genre réduire bottom-margin de j'ai section qui ne contient que le header ou, ce qui revient au même, le top-margin de la suivante. Ça doit effectivement être faisable à partir de ces pseudo bidules
Il se fait tard, je regarderai demain
Merci de ton aide!

gc-nomade a écrit :
ah okay, si pas de bordure, ni padding sur section, alors une marge négative peut le faire http://codepen.io/anon/pen/BjwdVq
++

Merci, c'est tout à fait ce que je cherchais à faire.

La raison de cette situation, c'est de permettre à des non techies de rédiger leur page en utilisant des snippets, sans trop avoir à se préoccuper du HTML ou du CSS. Moins il y a de types de snippets, plus c'est facile à utiliser.
Le snippet de base s'appelle "docSection" et contient

<section class="docSection">
    <header>
        <h2 class="...">.....</h2>
    </header>
    <p>...</p>
</section>

la feuille de style définit les sections comme des blocs "sans débordement", l'utilisateur n'a plus qu'à mettre le style du titre, le titre et le contenu du paragraphe, éventuellement des <figure> générées par un script.
Il y a un espacement en fin de section par margin:0.5em, mais si on a une section sans paragraphe, il faut réduire l'espacement entre les deux <section> qui devient trop important.
Les solutions alternatives étaient de mettre deux <header> dans la même <section>, ou deux <hx> dans le <header>, ou la deuxième <section> à l'intérieur de la première, ou un snippet spécial, ou tout autre gadget, toutes choses qui compliquent le processus de l'utilisateur pour un point sans grande importance.
Modifié par PapyJP (16 Jan 2016 - 09:46)

La solution est donc simplement

section>header:last-child  {margin-bottom:0;}

Mon utilisateur n'a qu'à supprimer le <p></p> du snippet, ce qui tout de même plus simple que mes solutions alternatives.

Merci encore!

Raphael a écrit :
EDIT : du coup actuellement, la meilleure solution demeure <snip>JS ou jQuery</snip>

d'ajouter des classes différentes à des éléments dont la fonction dans la page est différente (ou le style) et de cibler ces classes
Modifié par Felipe (17 Jan 2016 - 22:30)