Creating a Complicated Style Rule

i am confused on the part where i have to make a new style rule for “a elements within p elements within the nav element with the class value sitenavigation”.

because usually it would ask me to: “For the p element with the class value skipnavigation”…
which would mean i would have to use: “nav.skipnavigation p {”

It would really help if you gave us a link to the step so we are able to read these instructions in the proper context.

1 Like

it’s in a pdf; how do i send you it?

Ahh, I see. I don’t believe you can attach files in here. So just by going with what you gave us above, yes, I agree, the class name sitenavigation is on the nav element.

1 Like

would it be nav.sitenavigation p, or p.sitenavigation a?

i doubt it is nav.sitenavigation p a {

Please explain why you doubt that.

i’ve never used anything similar to nav.sitenavigation p a { before.
it’s usually nav.sitenavigation a:hover, nav.sitenavigation a:focus { at the most.

Well, I’m not sure why never using something like that before would prevent you from using it now :slight_smile:

You are setting the padding and display type on these a elements. Are they doing what they are supposed to? If so, then you know you have it correct.


oh, the context for this is that i’m learning html-css in my Web Design class, and this is in a pdf to follow the lessons.

i’ll check once i set up the code :+1:

1 Like

hmm, that’s interesting. how does that work in the context of the prompt and the order of the 3 elements and the 1 class?

also, thanks so much for the help :slightly_smiling_face:

I’m afraid I don’t understand your question. Can you be more specific?

sorry. i’m wondering why the order is nav, and then the class .sitenavigation, and then the elements p then a for a elements within the p elements within the nav element with the class sitenavigation.

The instructions want you to target any a elements that are inside of p elements that are inside a nav element with that has the class of sitenavigation. I’m not sure what other order you could use to do this. That’s the way CSS works. As you move from left to right in the selector list you are narrowing down into the DOM. So you first find the nav with the sitenavigation class, and then you find any p elements inside that nav, and then you find any a elements inside those p elements.

1 Like

alright, thank you so much for the clarification and help!


Fun fact, the matching is actually in reverse of how you read it. The selector engine matches right to left.

Well, maybe not so fun or relevant. Let’s call it a tidbit.

1 Like