6 replies [Last post]
anotherusername
anotherusername's picture
Offline
newbie
Last seen: 6 years 51 weeks ago
Timezone: GMT-7
Joined: 2014-10-19
Posts: 4
Points: 5

Hi all,

I know some basic CSS.

But please help me understand what it means when you see a DIV id followed by a class, such as:

#some_id .some_class { color: red;}

How exactly does that differ from simply doing:

#some_id { color: red;}

or just using the class alone:

.some_class { color: red;}

In what instances would you use both the ID AND the class?

Thanks in advance.

anotherusername
anotherusername's picture
Offline
newbie
Last seen: 6 years 51 weeks ago
Timezone: GMT-7
Joined: 2014-10-19
Posts: 4
Points: 5

Also, I am PRETTY SURE that I

Also, I am PRETTY SURE that I have seen the opposite as well, meaning that the class precedes the ID, like this:

.some_class #some_id { color: red;}

How is that different?

Is it just shorthand for writing:

#some_id { color: red;}

.some_class { color: red;}

Thanks in advance.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 32 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Family tree

It's all about who your daddy is.

#foo .bar {} refers to any element of class "bar" that is descended from the element of id "foo".

Thus,

#foo .bar {
  color: red;
  }

will apply to .bar in this case
<div id="foo">
  <p class="bar">...</p>
</div>

but not in this case
<div id="notfoo">
  <p class="bar">...</p>
</div>

The same applies when the style rule selects #foo as a descendent of .bar.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

anotherusername
anotherusername's picture
Offline
newbie
Last seen: 6 years 51 weeks ago
Timezone: GMT-7
Joined: 2014-10-19
Posts: 4
Points: 5

Thanks for the explanation

Hi there, Gary:

First, thanks for the explanation.

Also, thanks for pointing out the word "descendent" since I didn't know what the nomenclature was, so I didn't know what tutorial I should look up.

Now I know I need to read up on descendents (among other things).

~~~~

Another question if I may:

I sometimes see something like this:

.bar .jafo {
color: red;
}

Does this mean that one class (jafo) can be a descendent of another class (bar)???

am I right in assuming that this means, basically:

any element that has BOTH the .bar class AND the .jafo class applied should have color:red ???

Or does it mean something else?

thanks in advance.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

> so I didn't know what

> so I didn't know what tutorial I should look up.

In all circumstances one refers to what ever acts as home for the specification.

http://www.w3.org/TR/css3-selectors/#descendant-combinators

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 32 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Nope

Quote:

am I right in assuming that this means, basically:

any element that has BOTH the .bar class AND the .jafo class applied should have color:red ???

Or does it mean something else?

No, it means that an element with class=jafo is nested within (descended from), no matter how deeply, another element with class=bar.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

anotherusername
anotherusername's picture
Offline
newbie
Last seen: 6 years 51 weeks ago
Timezone: GMT-7
Joined: 2014-10-19
Posts: 4
Points: 5

gary.turner wrote: No, it

gary.turner wrote:

No, it means that an element with class=jafo is nested within (descended from), no matter how deeply, another element with class=bar.

cheers,

gary

Thanks. Got it now.