CODEWITHSUNDEEP
htmlcss
user3247608
user3247608

Reputation: 593

difference between .class element and element.class in css?

Following this tutorial http://www.w3schools.com/css/tryit.asp?filename=trycss_nesting. Confused about why they used .marked p instead of p.marked (why is it when I change it to p.marked the text doesn't go white).

I looked through previous posts like what is the difference between ".class element" and "element.class"? but couldn't understand the answers as they used terminology that i didn't understand like children and descendent.

could someone please provide a simple example on how these work. Thanks.

Upvotes: 1

Views: 1375

Answers (5)

vibhav yadav
vibhav yadav

Reputation: 53

when ever you write, .class elementname, it means you are targetting element name with in the .class tag. Suppose you have ".test p", for that you would write, <div class="test">Happened<p>Something</p></div>

And When you write, element .class, you are trying to target on .class element present inside the element's tag. Suppose you have "p .test", for that you would write, <p>Something, <div class="test">Happened</div></p>

Upvotes: 0

frogatto
frogatto

Reputation: 29285

Please read some basic rules of CSS selectors, like what is in the following: 

.foo --> selects all element which have class foo
#foo --> selects an element which its id is foo
p.foo --> selects all P elements which have class foo
p#foo --> selects a P element which its id is foo
.foo p --> selects all P elements which are resident inside all elements which their class is foo
and so on...

Upvotes: 3

Siv
Siv

Reputation: 1066

The thing is .class assign the property to all the elements irrespective of their type, ie it can be applied to div, span, p etc

But the element.class the property is applied to that element only

Upvotes: 0

Magesh Kumaar
Magesh Kumaar

Reputation: 1467

Its really simple.

Take this HTML code

<div class="container">
  <div class="inner"></div>
  <div class="inner"></div>
</div>

The First type is element.class

example: 

div.container{
 background:red;/*This will set the background to the div WITH class "CONTAINER"*/
}

The Second type is .class element

example:

.container div{
   background:blue;/*This will set the background to the div INSIDE the CONTAINER class*/
}

Upvotes: 3

Ranveer
Ranveer

Reputation: 6863

element.class applies the attribute to the element itself whereas .class element does so to the elements inside the class.

In simple words, if you have element.class and you say <element class="class" /> then, the css you make will be applied to that element. On the other hand, if you have .class element and then you do 

<element class="class">
<element />
</element>

then you css would apply to the element that is inside.

Upvotes: 0

Related Questions