Quel sélecteur?

Bonsoir
J'ai un assez grand nombre de pages dans lesquelles on trouve couramment la séquence

<p><br>du texte</p>

ou

<p>du texte<br></p>

ou même

<p><br>du texte<br></p>

J'essaie de rendre ces <br> invisibles avec

p br:first-child, p br:last-child{display:none;}

.
Cela ne fonctionne pas correctement (au moins sur FireFox): s'il y a une séquence

<p>du texte <br>un autre texte</p>

le <br> n'est pas affiché.
Y a-t-il un sélecteur qui permettrait de faire ce que je désire, pour éviter d'avoir à faire des "replace" dans toutes les pages?

J'opterais plutôt pour :

p br:first-of-type, p br:last-of-type{display:none;}

... mais pas convaincue que ce soit une solution vue que ça ne prendra pas en compte la condition devant le texte et aprés le texte ...
donc a prioiri, js
Modifié par gcyrillus (17 Jun 2016 - 20:11)

Bonsoir,

Ceci me paraît fort improbable. Pour le parser Css le texte est "invisible" dans le sens où il ne représente pas une entité. De fait il n'a aucun moyen de faire la distinction entre un élément enclavé dans du texte ou en bout de chaine de texte.

Probablement que la solution ne peut-être que par l'utilisation en pré ou post-traitement d'une regexp mais je ne pense pas qu'en Css on puisse y arriver.

Merci pour vos réponses.
Effectivement j'ai aussi essayé :first-of-type et :last-of-type, mais bien entendu c'est encore moins adapté.
Je crois hélas qu'il n'y ait rien à faire en CSS, je vais faire un replace dans le DOM, de toute façon il y a déjà pas mal d'adaptations en JS dans ces pages, un peu plus, un peu moins....

Bonjour,

pourrais-tu tester sur plusieurs navigateurs le simplissime :

br {
  display: block;
}

http://codepen.io/anon/pen/pbEbrJ?editors=1000
Sur Fx c'est OK mais ah zut ça ne fonctionne déjà pas sur Edge 13. Tant pis
Modifié par Felipe (18 Jun 2016 - 13:50)

Felipe a écrit :
Bonjour,

pourrais-tu tester sur plusieurs navigateurs le simplissime :

br {
  display: block;
}

http://codepen.io/anon/pen/pbEbrJ?editors=1000
Sur Fx c'est OK mais ah zut ça ne fonctionne déjà pas sur Edge 13. Tant pis

Déçu aussi que ça ne marche pas, mais peux tu m'expliquer pourquoi ça marche "presque"?
Modifié par PapyJP (18 Jun 2016 - 18:56)

Bonsoir PapyJp,
c'est dingue ton truc : 2 "à-la-ligne" ! par <p> et <br>

Efface (ou neutralise) tes <br /> par .css ou par .js, et/ou ajuste tes margin sur p ...

Non ?
Modifié par pictural (18 Jun 2016 - 23:53)

Pour être dingue c'est dingue, mais j'ai quelques centaines de pages de ce style à modifier. On a vu que le CSS ne permet pas de traiter le problème, je vais donc inclure un script (côté serveur pour ne pas avoir à le refaire en permanence). Et là je tombe sur un problème de regex que j'ai expliqué dans un autre fil Je crois savoir qu'il y a une solution, mais ma connaissance des regex est limitée à des choses très simples. J'espère qu'un expert va pouvoir me venir en aide.

Procédons par méthode : quel paramètre (unique) envisage ta correction .css ? (parce que)

Un simple <p> revisité en .css pour les centaines de tes pages devrait suffire :

p{margin:-1em 0}

ou

br{display:block;margin:-1em 0}

Non ?

Sinon ça devient délicieusement plus jouissif ... par exemple en listant tes pages par liste ordonnée en .js (avec tous les bons raccourcis d'écriture).

Malheureusement je ne suis pas un expert.
Modifié par pictural (19 Jun 2016 - 02:38)

Merci à tous pour vos réponses.

Entre temps le problème a évolué: je n'en suis plus à essayer de rendre les <br> superflus invisibles, mais à modifier le HTML par programme PHP.
Voir ce fil

Pour le reste, ce ne sont pas TOUS les <p> qui contiennent des <br> incongrus, mais c'est un peu au petit bonheur la chance, il n'aurait donc pas été approprié de styler les <p>, mais bien de styler les <br> quand ils sont en tête ou en fin de <p> pour les rendre inopérants, et ça, il semble bien qu'on ne puisse pas le faire.
Ce que j'ai surtout appris par cet échange c'est que le CSS ne tient aucun compte des "noeuds textes", ce que je n'avais pas touché dû doigts jusqu'à présent.

Reste que je suis toujours intéressé à comprendre pourquoi styler un <br> en display:block; le rend inopérant en début ou fin de <p> mais pas au sein du <p> sur presque tous les navigateurs.
Modifié par PapyJP (19 Jun 2016 - 09:36)

Fiefox accepte quelques régles CSS sur les br, la ou les autres non.

Un élément block vide, n'a pas de hauteur, c'est pourquoi si il se situe au début du flux ou à la fin , tu ne le perçoit plus , .. dans FF , aiilleurs il provoque bien un retour à la ligne
cdt
Modifié par gcyrillus (19 Jun 2016 - 16:20)

PapyJP a écrit :

Déçu aussi que ça ne marche pas, mais peux tu m'expliquer pourquoi ça marche "presque"?

Au choix :
- c'est de la magie
- je n'en (av)ai(s) aucune idée


Je viens de regarder sur Chrome, ça ne fonctionne pas non plus.
Le vrai "problème" (ou qui empêche d'avoir une solution) est la limitation des sélecteurs en CSS qui ne permettent pas de savoir si 2 balises sont collées l'une ou l'autre ou s'il y a du contenu (seule la présence des éléments est considérée, sans plus de détail). D'où JS ou traitement côté serveur

gcyrillus a écrit :
Un élément block vide, n'a pas de hauteur

Ça devait être un peu trop évident pour que j'y pense Je restais bloqué sur "block - toute la largeur qu'est-ce que les éléments auto-rem… euh non auto-fermants viennent faire là-dedans ?" très mauvaise piste

Merci à vous
Je ne suis peut être pas moins idiot, mais j'ai tout de même appris quelque chose

Peut être puis-je vous donner un éclairage sur :

p br:first-child, p br:last-child{display:none;}

<p>du texte <br>un autre texte</p>

les boites dites anonymes(*) ne font pas parties des éléments pris en compte pour la sélection de last-child ou first-child.
Dans notre exemple <br> est donc le premier et le dernier br:last-child ou br:first-child[/code].
Il en est de m^me si je me trompe pas pour toutes Pseudo-class de "type selecteur" (last-of-type, :nth-of-type , ect)

* qui ne sont pas entourés d'une balise , soit "du texte" et "'un autre texte"