CODEWITHSUNDEEP
css
baron
baron

Reputation: 11181

Understanding CSS declaration

When I declare something like

<div class="t-widget t-treeview t-reset" id="TreeView">

Am I saying that either three classes (i.e. t-widget, t-treeview or t-reset ) apply?

So:

.t-widget
{
   ...
   /* Styles apply */
}

.t-treeview
{
   ...
   /* Styles apply */
}

.t-reset
{
   ...
   /* Styles apply */
}

Upvotes: 0

Views: 97

Answers (5)

Kevin
Kevin

Reputation: 26524

This means that you're getting all the styling from each class and applying it to that element.

The element will revive all of the declared styles if the specificity is right.

You can read some good stuff about that here => http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

you can also create selectors like:

.t-widget.t-treeview.t-reset { ... }
.t-widget.t-reset { ... }

The classes you use do not matter as long as they are valid. Elements with the declared classes in combination would receive those styles.

Upvotes: 1

Matt Briggs
Matt Briggs

Reputation: 42158

To build on slebetmans answer, you can also use combinations of them. so

.widget.treeview { }

would match only elements with both widget and treeview classes

Upvotes: 1

Eric Fortis
Eric Fortis

Reputation: 17350

yes keep in mind that CSS means cascading styles sheet

Upvotes: 2

imyousuf
imyousuf

Reputation: 1245

<div class="t-widget t-treeview t-reset" id="TreeView">

It mentions that all 3 classes apply in sequence. That is style of t-widget applies first, t-treeview second and t-rest last in this example. IOW the later not only applies later in sequence but also overrides the earlier styles.

Upvotes: 1

slebetman
slebetman

Reputation: 113866

Yes, they all apply. And since their specificity are equivalent the latter declarations overrides the earlier ones.

Upvotes: 3

Related Questions