Beginner - Selector in CSS question

HTML-CSS
1

Hello, i am a beginner in this field and i have joined the Responsive Web Design course to learn about HTML and CSS. Right now im in Learn basic CSS by building a cafe menu and so far i have understood everything that i’ve been taught except for this one thing (sorry if i can’t manage to make myself explain my doubt well enough beforehand).

Why does this Selector in CSS has a p after it when the other classes don’t?

image
image1118×603 83.1 KB

*Is the line 42
*The entire code can be seen on the step 73 of the " Learn basic CSS by building a cafe menu "

I am posting the same question again because the previous post got hidden.

2

Hi @MillerOldfield,
This would mean you are styling the <p> descendant of the class .item

Hope this helps.

Thanks,
Hal_Jordan

4

Thanks for your reply, i’m still a bit confused, why dont just writing .item is enough? wouldn’t it affect all .item classes regardless if p is written or not?

5

But we don’t want to affect all the .item classes. We just want to affect the p tag inside the .item classes. So how will we do that?

6

Thanks for your reply, i think i understand now, the p is used to let the writing program know which tag to use inside the nesting, otherwise it would not know which one to use, is that right?

7

Yes, If we use just p instead of .item p it will affect all the p tags and if we use just .item it will affect all the elements containing .item class.
But here we want to affect only the p tags which are inside the .item class.
So .item p will affect the tags which are similar to this one

<div class="item">
    <p>
        This is a demo p tag.
    </p>
</div>
8

Hi @MillerOldfield, You can give any html tag the same class name.
That being said, If you notice the class .item is given in several of the html tags in the html code block in lesson 73.
So what would happen if you were to remove the ‘p’ after the css code block .item p ?
I ask this and would suggest that you try it. In fact always try to break things, and by that I mean if you ever wonder again why something is where it is at, try removing it or commenting it out and see what happens.
You can always reset the lesson. But the knowledge gained in playing around with the code block in question is where you will sometimes learn the most.

If you still don’t understand after trying this, just ask again and we can answer.
Hope this helps.

Thanks,
Hal_Jordan

9

I see, i feel im understanding a little bit more how HTML behaves with CSS, thanks for taking the time to helping me out, i apreciate it.

1 Like
10

Yes, i deleted the p leaving only .item and the styling dissapeared from the rest of p’s, i think that happened because the program is in conflict having different actions overlapping each other, that`s why p is used to let it know which tag the selector is referring to.

Edit: After reviewing the code again i think is not because is overlapping, because there is no other .item selector i’m assuming it just needs clarification on which tag to use from the nesting.

11

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