Item taking properties from user agent

I have this simple HTML/CSS code here but in fiddle item3 and item 4 are rendering white but when I render it locally they are in green which means they are taking this property from item 1. When I inspect them it just says “user-agent” but if it’s user-agent it would be white wouldn’t it?

This is what I see locally.

Sound like either your css has an override in it somewhere or the html markup isn’t closed.

I played around with your link, and the only way I could get the last two elements to be green was to change this

div:nth-child(1) {

to

div:nth-child(n) {

But that also changed the layout because if would apply to all the elements

Change that line to this instead. If you still get the green on all the elements, you have css somewhere else which applies.

div:first-child {

this is what i see when i click on item3 and item4…

image

I agree, that’s what you should see…

What do you get when you go into the computed tab? That should tell you where the view discrepancy is coming from?

Also, what’s in the “Code injected by live-server” JS? Is there something in there which messes with the DOM structure?

This is what I see in computed tab. Live server is there because I am looking it from withing visual studio code editor but that is not an issue since it is the same when I look at it without VSC.

image

Oooooohhhh. Now I see what you’re seeing. I copied your code to a local file on my desktop and can duplicate it. Funky!

But I understand why now…and should have caught it. This selector doesn’t work quite the way you’re thinking (and I was thinking…it’s Monday)

div:nth-child(1) {

This doesn’t select the first child element INSIDE of a div. It’s going to attach to the first instance of a div inside another element. So it’s going to attach to <div id=“parent”> AND to the first div inside of it. And because you don’t specify the background on the other divs, it’s going to inherit the background of it’s parent - which will be the green.

JSFiddle does some funky stuff with renderings, which is why I personally prefer Codepen - which shows the same rendering you get locally.

You can resolve it one of two ways…

  1. Add a background to #parent which has higher specificity than div:nth-of-child(1)
  2. Change the div:nth-of-child(1) to #parent div:nth-of-child(1) which would force the selection of just the element inside of the parent element.

I will try that thank you. Last question. why when i inspect item3 and item4 is telling me user-agent?

You mean the user-agent stylesheet? That’s just the way of saying that the base browser rendering is being used and no other styling has been applied to it.
Contrast that with the first element which has a style applied to it.
image

It actually shows better when you have something that overrides the default behavior for the element, so if I changed the display mode for the first div
image

The reason you don’t see the color issue is because background color is an inherited property by default, which means it will pull from the parent if one is not defined.

Background is not inherited :slight_smile: You can see it because the default for a background is transparent so you just see the parent underneath :wink:

The crux of the problem is that you should only put html that goes inside the body tag in the fiddle and not the whole doctype and head stuff. If you do it properly it renders as it should do.

#parent gets the background color because it’s the first child of the body and the first div inside #parent also gets the background because it’s the first child of #parent.

1 Like

I knew that (did I mention it’s Monday?)

1 Like

Thanks for the reply but this is confusing me. #parent doesn’t have any color properties and neither is body

As I said above #parent is the first child of the body element. Therefore div:nth-child(1) will refer to #parent and any other div on the page that is a first child of its parent.

The reason your original fiddle failed is because you added html into the panel that shouldn’t be there and effectively something else was the first child and #parent was about the 4th child.

What is it that confuses you exactly?

#parent doesn’t but div:nth-child(1) does. Both selectors are being applied to <div id=“parent”>

#parent is being applied because if the id.
<div id=“parent”> is being applied because it’s the first div within the body element.

nth-child is a bit misleading - it doesn’t select the first child element inside the element defined. It selects the first INSTANCE of the element when it’s inside another element (which considering you need a body element, will always be true)

If you want to select the first div inside the parent div, then you need to alter the selector a bit

#parent div:nth-child(1)

or if you want the first div inside another div

div div:nth-child(1)
1 Like

…and just to clarify :slight_smile: That rule will only succeed if the first element is a div. If the first element is something other than a div then that rule fails. It does not look for the first element that is a div. It looks for the first element and if that happens to be a div then the rule succeeds.

nth-of-type (as Dave mentioned) would find the first div of that type in a sequence which may mean that the first div is actually not the first item.

Best explained in a demo :slight_smile:

1 Like

ok I see what you mean. Thank you both

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