2

In a nutshell: How do I select all paragraphs immediately following <p><br></p> using only CSS?

[EDIT] It seems that this is impossible with pure CSS, so I will open up the floor to anyone who knows how I can target such a string using simple/clean jQuery, given that the note editor in which I'm working is a jQuery editor. Thanks for checking it out.

Longer explanation:

I am trying to set up some styling within a note program rich text editor so that it can be used for long-form writing.

Basically, most paragraphs need to have first-line indents. That is easy, I just add p {text-indent: xem;} in the <style> section.

However, when there is an extra ENTER keystroke (i.e. an extra space), I need the following line to NOT have an indent (i.e. p {text-indent:0;}).

Since these paragraphs follow an extra ENTER keystroke, these are the paragraphs immediately following <p><br></p> (the code generated by the editor I'm working in). That is the defining condition I need to target.

I am no professional coder, and so I have spent a couple of hours trying to figure out how to do this, unsuccessfully.

The problem is the fact that the br is automatically wrapped in P tags. For a standalone br tag, none of this is an issue - it works. But unfortunately, it is wrapped. This syntax actually works in my environment: br + p {text-indent: 0;}, however that only works with a standalone br tag.

I can't select the element via :empty and apply zero indent (i.e. p:empty + p) because it is not empty (contains the node <br>). (...is there a hack to make :empty ignore nodes?)

Hopefully there's someone with high-level knowledge who can let me know the best way - there must be a way..!

Adding HTML or jQuery is not an option - I will need to do this with CSS only.

Many thanks to anyone who can help with this one.

Jason849
  • 33
  • 4
  • Go through this. You might get some clarity https://stackoverflow.com/questions/899252/can-you-target-br-with-css#:~:text=In%20effect%2C%20the%20element%20is,can%20do%20with%20other%20elements. – Anand Sep 11 '20 at 09:29
  • 3
    You can't do this with CSS only, you will need javaScript for this. In a couple of years you can do something like [p:has(br) + p {}](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) ... Or do you only need the indent on the first paragraph? then it's possible. – cloned Sep 11 '20 at 09:31
  • @Anand - thanks for that. Yes that is a very closely-related question. I did go through that previously. Frustratingly, I have no problem targeting the
    node. The issue is the fact that it is wrapped in `P` tags.     – Jason849 Sep 12 '20 at 10:05
  • @cloned OK, that's what I feared. Well, I know that Query is enabled within the editor in question. I did make a mess of a jQuery attempt, but I don't really know much of it. Say there was a simple jQuery line or two that could achieve this. Could you share with me what it would look like? I am willing to try that. (The indent is needed for the paragraphs immediately after every instance of `


    ` throughout the document. Many thanks.     – Jason849 Sep 12 '20 at 10:09

0 Answers0