Using CSS to add a class to a br tag

Hi everyone,

Is there a way to target a break html tag which is a child of an H4 tag and insert a class into the break tag but only for specific screen sizes, ie for mobile sized screens?

If yes, can anyone tell me how I would do this using CSS?

Thanks in advance for any advice.

What is the class intended to do there? According to MDN, the <br> tag is an empty element that can’t take any content. Sounds like you’ll have to target another element to achieve what you’re after.

I need to insert the following class:

<br class="hide">

The class of hide is a bootstrap class and would hide the br tag when in mobile view. Is that possible?

But I’ve successfully added the class of hide into an html element so it must work but the question is can you target a specific br tag when it’s the child of an h4 and then have css insert a class?

#mydiv h4 br {

{

Something would go between the curly braces?

The reason why I need to add the class using css is because the users of a content management system don’t know how to add a specific class so I was hoping to do this with the css. If I do in fact need to target another element to achieve this, is it possible to target the h4 and then target its child which would be the br?

True, it can’t take content, but you can apply classes and a show/hide query will work.
But.
I doubt a <br> in a h4 is semantically correct. How I break lines in a header is to use spans for individual lines set to display: block. Again you can use queries to alter this behaviour.

h4 span { display: block } /* could be in a query if required */
<h4><span>Line One</span> <span>Line Two</span></h4>

It may not be semantically correct but it’s the best I can do for a content management scenario, ie. the user is inserting a heading (consisting of an h4) and if they hit the return key on their keyboard to go to the next line in the CMS WYSIWYG editor then the code creates a br tag in the html. I need a way for the css to target that br tag that they created and add the class of hide in order for it to be removed when in mobile view.

Can this be done? If yes, can you tell me what the code would look like?

Hi,

  1. Yes you can add a class to break tag just like any other element.

  2. No you can’t add a class dynamically with css as you would need js for that (if that’s what you meant).

  3. yes you can target a break tag that resides in an element assuming its the only break tag.

e.g.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

@media screen and (max-width:768px){
h4 br{display:none}	
}
</style>
</head>

<body>
<h4>Hello <br> Paul</h4>
</body>
</html>

Whether that’s what you meant is another question :slight_smile:

1 Like

Thanks for clarifying Paul. I now know that I can’t use css to dynamically add the class but I’ll see if I can use JS as you suggested.

Thanks again.

Do you need js if the breaks you want to target are within a known context? Css can do the job unless of course there are some breaks in that context that don’t need to be targeted and in that case you would probably need to have added a class to them.

I’d be targetting within a known context, ie. I would refer to the br tags that are children of an h4 which is a child of a div of a specific ID. In that scenario, can you use css? If yes, how would it work

See my demo above :slight_smile:

But your demo is targeting the BR and then hiding it. I need to target the BR and use css to apply a class of “hide” to the br. This class is a bootstrap class which then uses css to hide the BR. Can that be done?

Sorry I think I’m getting confused. I probably just can’t use the bootstrap class - I’ll just target the br and then apply the css myself. This is very confusing.

No you simply need to supply your own css and hide it as I have done above.

If you want it to match exactly what .hide does then open your bootstrap css and find the rules for .hide and duplicate them in my demo above. All ,hide does is sets display:none at various breakpoints.

Ok I understand now - thanks so much for clarifying.

I just looked at the bootstrap file and all it does is set display:none.

.hide {
	display:none!important
}

It is not in a media query and will just hide for all screen sizes.

Ok thanks again

I’ve used that technique myself in the past. The only way I could conceive of removing an HTML tag though, was to involve JavaScript, which may not a be a route the OP wishes to go down.

Edit: I see the thread has moved on little.

1 Like