CSS - When to use .class p or class.p

I know that in most cases, I could simply name every single tag I want to use or use span class to highlight changes, but I would like to get my head around this.

I understand that if I am using a <div class="example1"> for example and only wanted to highlight the paragraphs in that div then I would use:-

.example 1 p {.............} PLEASE CORRECT ME IF I AM WRONG

However from references I have read, outside a <div> e.g. Say I have named a <p class="example2"> and wanted to target the <q> inside it, then I would use:-

example2.q {..........} PLEASE CORRECT ME IF I AM WRONG

If I am correct, what are the rules around this? Why is the div example different to the example outside the div?

Thanks

.example1 p is correct.

But in second scenario, it should be

p q { /*your code*/}

if you want to target all <q> in <p> tags or

.example2 q { /*your code*/}

If you want to target all <q> tags in tags having class .example2

.example1 p is correct.

But in second scenario, it should be

p q { /*your code*/}

if you want to target all <q> in <p> tags or

.example2 q { /*your code*/}

If you want to target all <q> tags in tags having class .example2


So no matter if inside a <div> or outside, you use the input method of:-

.classname element..... Sp

.example p { ............ } for example????????

If using <span> tag is this exactly the same?

Thanks

However from references I have read, outside a <div> e.g. Say I have named a <p class="example2"> and wanted to target the <q> inside it, then I would use:-

example2.q {..........}

No, if you want to address a q element inside a paragraph with class “example2” then it must read .example2 q {…}. It’s the same for everything:

<ul class="list">
<li>this will be styled</li>
</ul>
----------
.list li {…} /* will style list items inside any element with class “list”
==========
<p class="text"><span>this text will be red</span></p>
<div class="text">
<span>this will also be red</span>
<p>this text will be green</p>
</div>
----------
.text span {color: red;} /* will style spans inside elements with class “text” */
.text p {color: green;} /* will style paragraphs inside elements with class “text” */
==========
<h1 id="heading1"><strong></strong></h1>
----------
#heading1 strong {…} /* will style all strong elements inside elements with ID “heading1”

No, if you want to address a q element inside a paragraph with class “example2” then it must read .example2 q {…}. It’s the same for everything:

<ul class="list">
<li>this will be styled</li>
</ul>
----------
.list li {…} /* will style list items inside any element with class “list”
==========
<p class="text"><span>this text will be red</span></p>
<div class="text">
<span>this will also be red</span>
<p>this text will be green</p>
</div>
----------
.text span {color: red;} /* will style spans inside elements with class “text” */
.text p {color: green;} /* will style paragraphs inside elements with class “text” */
==========
<h1 id="heading1"><strong></strong></h1>
----------
#heading1 strong {…} /* will style all strong elements inside elements with ID “heading1”



Such a simple answer, but you can't understand how that has helped me, ive read numerous texts saying in some places you put the tag before the . and the class name etc.

Thanks man

ive read numerous texts saying in some places you put the tag before the . and the class name etc.

Well, actually yes, you can do that (to add to the confusion). What I wrote above counts for any element with that specific class, so .example {…} could address paragraphs with that class or divs with that class or spans with that class since I didn’t specify the element type. Now, when I want to be more specific I’d write div.example {…} to say that only divisions that have this class will be styled:


div.example {…}
----------
<h1 class="example">this text won’t be styled</h1>
<div class="example">this text will be styled</div>
<p class="example">this text won’t be styled</p>

and likewise:


div.example span {…}
----------
<h1 class="example"><span>this text won’t be styled</span></h1>
<div class="example"><span>this text will be styled</span> and this won’t</div>
<p class="example">any text in here <span>won’t be styled</span></p>


So in a nutshell: With div.example {…} and p.example {…} or img.example {…} you can apply different styles to different element with the same class. Theoretically .example {…} is the same as writing *.example {…}, the asterisk meaning “all elements”.
I hope you’re not too confused now.