Don't use the br + br selector to hide the superfluous carriage return.

#html #css #webdev

You probably see some advice on the web and especially on Twitter about this selector:

br + br {
  display: none;
}

Theorically, you want to hide the superfluous   elements that are sometime added by a text editor in a CMS when you hit Enter. This selector seem pretty neat! This Tweet from Harry Robert who got a lot of Retweets and Likes, mention this tip.

But do you know what is really happening…?

Let's give a look on this Pen I made. It's a simple text with some carriage returns added on it. You will notice that I added two siblings   tag and this is the second one that we want to hide with this selector!

The fact is that the   tag is part of the text DOM, you will see that all the   tag except the first will be hiden. This will completely interfere with the reading by showing us some big parts of unreadable text.

I'm curious if you know others tips to get rid of bad outputs from CMS. Let me know!