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.