What is the difference between main.p and .main p?

idk :question: idk idk
I’m new

Hello @awesomekid2787556626, welcome to the forums! main.p applies to anything inside the <main> tag that has a class of p.

.main p applies to any p(paragraph) tag inside the element that has a class .main.

1 Like

If you have a tag called <main>, then how you would select this in your css is by typing main. Now let’s say you have a div tag with a class titled “main” like this: <div class= 'main'></div>. How you would select this container in css is by simply adding a period in front like this: .main. Hope this helps!

I assume you mean p.main? That would select paragraphs with a class of main. Example: <p class="main">Paragraph selected</p>

.main p will NOT select paragraphs with a class of main, it’ll select paragraphs nested within tags with a class of main. Example: <div class="main"><p>Paragraph selected</p></div>

However, if you meant main.p, that selects main tags with a class of p. Example: <main class="p"></main>, no paragraphs selected at all.