What can cause a p:first-child to effect all first p's in sections in a given webpage?

Say have a page with many section tags. In each one there’s a p element.

You add to the css:

p:first-child {font-weight: bold}

And yet, instead just the very first p element, all first-in-section p tags are bolded.

What can cause that?

I don’t want to post a link to my web site which is contfix + co + . + il there the HTML is apparent.

p:first-child will select every p element that is first element of its parent.

Use section p:first-child if you want to select every first p element inside section element.

Sorry, but I can’t read that minified version in order to work out your page structure.

If you only want the very first p element on a page to be bolded, it might be simplest to add a class to that paragraph and style the class.

Yes that’s what the code you use will do as already mentioned it will style the ‘p’ elements that are the first child in each section.

You don’t actually say what you wanted to happen?

Did you only want to style a single specific element or a simngle specific element within a unique context?

Your question doesn’t actually describe what you want to achieve :slight_smile:

(Not to mention that in your page you are actually using first-of-type and not first-child anyway ;)).

I also notice that you did not add my fix from a previous thread and as a result your page feels very laggy when resizing the window.

Hi @TechnoBear. I thought inspecting the DOM is enough. Anyway, adding a class is repetitive and I’m looking for a more automatic way.

To me the menu opens fine, anyway:

Sorry Paulo, I forgot to change first-of-type to first-child (maybe because both got me to the same result.

What I tried to describe is that I want the first p tag of each page to be bolded.

Only the first one. Without adding a class.

Maybe a JS document.querySelector will be better than CSS for that purpose, I’ll try later.

I’ve not been following this thread nor your previous one, but I am led to ask what determines the start of a “page”? Are you talking about print or about an HTML page?

Adding document.querySelector('#content p').style.fontWeight = 'bold'; helped.

@ronpat I meanu to the start of the middle part of the page, between header and footer. Anyway, the above JS directive worked fine. The page is built with a pagebuilder with massive layout and the JS solution is fine for that.

1 Like

Thats no different to:

#content p {font-weight:bold}

??

What you have achieved is to style every p tag within Content which from a rough guess is about 30 plus items on that page.

No it didn’t work at all in the way that you requested! Not even close to what you asked for?

Don’t keep using JS where css only is required even if you are using a ‘pagebuilder’ as you will get a negative effect on the performance of your page every time you do this.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.