-1

I have an input label which has multiple css classes applied to it (say c1, c2). c1 contains a style display:inline-block, while c2 contains a style display:none.

Is there any rule on which of the display styles will be picked here ? Will it pick the display property from c1 or c2 ?

snow_leopard
  • 1,286
  • 2
  • 17
  • 33
  • in css, it override the properties when redefine. here c2 properties are applied – Tamil Selvan C Jun 25 '14 at 09:46
  • i thought he asked how css rules applied. – Alex Char Jun 25 '14 at 09:49
  • each selector has a specificity. id's (#) are the highest, then classes (.) and finally elements (for example: p). The specificity is given by how many and where you use them. If two selectors have the same specificity, the last one in your stylesheet will be the one that counts – Jonas Grumann Jun 25 '14 at 09:50
  • @pstenstrm: I don't think that's the right duplicate either. – BoltClock Jun 25 '14 at 09:51
  • Here I have two classes, hence I think specificity is same. Question is which display style will be picked ? "none" or "inline-block" ? – snow_leopard Jun 25 '14 at 09:52
  • @snow-leopart you're right. Here the specificity is the same, so the last one declared will be picked – Jonas Grumann Jun 25 '14 at 09:54

3 Answers3

2

The only rule that applies is cascading, which works the same way even for elements that have multiple classes which are all matched by individual class selectors.

Namely if you have CSS as follows:

.c1 { display: inline-block; }
.c2 { display: none; }

... where the selectors .c1 and .c2 have the same specificity, then the display declaration that comes last will take precedence, even when the same element has both classes.

Note that since the element has both classes, it will still match both rules, so any properties that don't overlap will still apply as normal:

.c1 { display: inline-block; font-weight: bold; }
.c2 { display: none; color: red; }

In this example the element will have bold and red-colored text, but its display will resolve as none.

BoltClock
  • 630,065
  • 150
  • 1,295
  • 1,284
0

It depend where you have written your class.

CSS works with the order of class. If your first class is display:none and after that if you have written display:inline-block in second class, it will show the label. and in vice verse scenario it will not show the label.

you can play with this http://jsfiddle.net/eWrpK/2/

Mayank
  • 102
  • 7
0

Yes, and this happens to be the foundation for how CSS works.

Precedence of CSS rules is based on a number of things: cascade (with changes declared later in the code taking precedence over what was declared earlier), specificity (how specifically the CSS declaration can grab onto a target. For instance, just declaring p { color: red} is not nearly as specific as #body div p.myClass { color: red;} . Using the !important tag can override the cascade as well, though it's best not to use it unless you really have to (for instance, if you inherited a system and don't have ability to edit the CSS document).

In your example, c2 would override c1 if it came last. C1 can retain its precedence if it has the !important tag (which hopefully it doesn't, because as you can see this can start to create problems if it's used too much).

AardvarkApostrophe
  • 295
  • 2
  • 12
  • I avoided to tell him about the !important as he seems like a beginner and I don't want people to start using bad stuff ^^ but yeah, that's a complete ansewer – Jonas Grumann Jun 25 '14 at 09:55
  • I hear ya, but I've got mixed feelings. Sometimes I think it's productive to help beginners do Bad Stuff because it helps them accomplish what they want quickly. My level is actually not very high either and I'm always grateful when a more advanced person, knowing there are fundamentally better ways to do it, comes down to my level and gives me the answer I was looking for even if it wasn't the best one. :) – AardvarkApostrophe Jun 25 '14 at 10:00
  • I love !important when it lets me accomplish what I want. But I hate it when it's in someone else's code and I'm trying to get around it. I guess everyone likes the smell of their own !important – AardvarkApostrophe Jun 25 '14 at 10:02
  • ahah you're right. I use it as well. Everyone lets out an !important every now and then, we're humans.. – Jonas Grumann Jun 25 '14 at 11:56