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?
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.
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?
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 */
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?
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
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.
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.