How to write out Pseudo-selector for nested child elements?


#1

Hi
I've tried the following in my stylesheet that didn't work:

body div p ul:first-child { attribute: value; }

The reason why I ask is that I've incorporated

elements to organize the page better.

Thanks!


#2

some css code is nice, but what is the html code?


#3

the first problem you have here, is that ul is not in the list with elements you can nest in a paragraph, here is the list


#4

Thanks for the reply.

The question is about the syntax for deeper level child elements in regards to the CSS markup for pseudo-class selectors.

I realize that there are specifics to each element and how they can be addressed and that affects how the CSS is written out.

Would it make it easier to answer my question if the example was this?

body div div div:first-child { attribute:value; }

Secondly, I would like to write out corresponding html markup, but for some reason, this messaging format won't display the skeleton of the html markup and only the "content" of the html that I write out. Is there some way of displaying ALL of the html ?

thanks


#5

Ok

So I realize I was missing something in my CSS mark up: the actual pseudo-class selector.

So the following mark up in question is this:

body div div p:hover { attribute: value}

Would this be correct?


#6

yes, body div div div:first-child { color:red; } as you can see in this example. i left out body, no need to specify it, all elements you want to target are inside body, so need to specify this.

You could also uses classes (is this already covered?), html code:

<body>
  <div>
    <div>
      <div class="red">red</div>
      <div>not red</div>
    </div>
  </div>
</body>

css:

.red { color: red; }

body div div p:hover { attribute: value} would also be correct (i would not put body in as css selector, but it is not wrong.

This image might explain how to post code on the forum:

if that doesn't work, here are the steps: make sure there is a empty line above and below your code, select your code with your mouse (or keyboard), press ctrl + k or the button that looks like this: </>, see step 3 of the image above.