...

View Full Version : .x1.x2.x3 vs .x1, .x2, .x3



joliett89
08-09-2011, 12:33 PM
Is there any difference between:

.x1 {color: black;}
.x2.x3 {color: green;}
.x1.x2.x3 {color: red;}

and

.x1 {color: black;}
.x2, .x3 {color: green;}
.x1, .x2, .x3 {color: red;}

lets say:

<p class="x1"></p>
<p class ="x2 x3"></p>
<p class ="x1 x2 x3"></p>

Just wondering...

vikram1vicky
08-09-2011, 02:19 PM
Is there any difference between:

.x1 {color: black;}
.x2.x3 {color: green;}
.x1.x2.x3 {color: red;}

and

.x1 {color: black;}
.x2, .x3 {color: green;}
.x1, .x2, .x3 {color: red;}

lets say:

<p class="x1"></p>
<p class ="x2 x3"></p>
<p class ="x1 x2 x3"></p>

Just wondering...


In 1st scenario .x1.x2.x3 next class like x2 and x3 will apply to child elements of class x.

In 2nd scenario .x1, .x2, .x3 , it is just grouping of classes which has similar CSS properties.

.x1, .x2, .x3 is same as .x1 {...} , .x2 {...} , .x3 {...}

teedoff
08-09-2011, 02:25 PM
Just a suggestion, you could use less cryptic naming conventions as well.

x1 x2 x3.....24355.........very cryptic and will get very confusing in the future. Give your id's and classes meaningful names.

<p class="firstParagraph">
<p class="secondParagraph">

VIPStephan
08-09-2011, 04:41 PM
Just a suggestion, you could use less cryptic naming conventions as well.

I suppose this was just for demonstration purposes.

But i’m not sure if I understand what vikram1vicky is saying. .x1.x2.x3 {…} only applies to elements that have all three classes while .x1, .x2, .x3 {…} will apply to elements that have any of these classes.

teedoff
08-09-2011, 04:52 PM
I suppose this was just for demonstration purposes.



lol Yes I thought that might be the case AFTER I posted.

resdog
08-09-2011, 05:59 PM
I think Vikram was thinking that there was a space between each class (.x1 .x2 .x3), which selects the .x3 class inside .x2 class inside .x1 class.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum