12

So, I am a bit confused over this simple thing, i've googled as much as i could, but i just dont know the right keywords for googling it, i tried CSS selectors, etc, no answer was enough to clear my confusion. So i've also tested and p.classname doesn't even seem to work, but by definition in a book i'm reading ( updated 2012 )

To create a class in CSS and select an element in that class, you write a class selector, like this:

p.classname{ stuff }

So now you have a way of selecting

elements that belong to a certain class to style them.

I couldn't find a definition for

classname p, but myself would give something like this definition "select all p elements that belong to classname", which is basicly the same.

the p.classname works when i give the "classname" to a im still confused, at the moment i would suppose im just going to perma use the .classname p, which works and is basically the same.

So, please help me out to clear this confusion, i've googled, i tried to help this confusion but it didn't work, it only made more.

Thanks

Improve this question
1
  • 2
    Here we don't put "SOLVED" on the title, we select the answer.
    – jsedano
    Commented Apr 18, 2013 at 22:35

3 Answers 3

Reset to default
26

So when you do 

p.classname{
  ... 
}

You are looking for a <p> with class classname

when you do 

.classname p

You are looking for a p that is a descendant of the classes classname.

In CSS . is used as a selector for a class name.

Improve this answer
13
  • 4
    .classname p means you are looking for a p that's a descendant of any .classname.
    – gen_Eric
    Commented Apr 18, 2013 at 22:07
  • I think posting helped me out to regroup ideas, but then if i really get it, i would say p.classname is kind of bad, as you have to put all the time the same classname inside a paragraph... So this way is good for multiple locations inside of different divs while .classname p is good if you want to style all P inside one div?
    – Elias Zan
    Commented Apr 18, 2013 at 22:07
  • in the subclass of classes by the name classname head spinning trying to understand this :D
    – Ejaz
    Commented Apr 18, 2013 at 22:08
  • @EliasZan: Neither are good or bad. It depends what you want to do. You can have multiple elements with the same class. It all depends on what you are doing.
    – gen_Eric
    Commented Apr 18, 2013 at 22:08
  • CSS parsin is right to left. So if p selector is not needed .classname is enough. Again, depends on the use
    – Thanh Trung
    Commented Apr 18, 2013 at 22:10
2

CSS works by reading each rule in order, example.

p {font-weight: bold;}

p span {font-weight:normal;}

<p>Hiya</p> // BOLD

<p><span>HIYA</span></p> // NORMAL

Same goes for classes

.bold {font-weight: bold;}

span {font-weight:normal;}

<p class="bold">I AM BOLD <span>I AM NOT</span> BOLD AGAIN</p>

<p class="bold"><span> I AM ALL NORMAL</span></p>

So in your example defining a class first will target each and every element that has that class.

By defining something after that class .class p it will target all elements inside that class which are p.

Hope this helped

UPDATE

so you can understand better,

div {color: blue;}
div p {color: red;}
div p span {color: yellow;}
div ul {color: purple;}

<div>I AM BLUE <p>I AM RED <span> I AM YELLOW</span></p>I AM BLUE</div>

<p>I HAVE NO CSS ATTACHED TO ME</p>

<div><ul><li>I AM PURPLE</li></ul> I AM BLUE</div>

It works exactly the same for classes as it does with elements.

Improve this answer
2
  • Yeah, ok i think maybe i finally get it, as i said before, if i have 5 divs in a page and they all have a blue paragraph, i call a class "blue" and do this : p.blue { color:blue; } and it will only select those 5 element with such class, while i would need to do changes for each div if i needed to make 5 paragraphs blue with "class p", but then, if i do div1 p.blue {color:blue;} ( is it even possible? im going to try after i post anyway ) i assume only div1 p.blue will become blue, right?
    – Elias Zan
    Commented Apr 18, 2013 at 22:14
  • Yes, you can select only one element like that too, but an id would be better for such a use. I will extend my answer to help you understand more, glad it helped.
    – GriffLab
    Commented Apr 18, 2013 at 22:16
1

I would explain it like this, if you have the following CSS below:

p.classname { stuff }

it has locked that class name to the <p> tags only.

So if you put class="classname" in anything else, it won't work on anything but the <p> tags.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.