Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

problems styling class

4 views
Skip to first unread message

cerr

unread,
Nov 24, 2012, 5:50:44 PM11/24/12
to
Hi,

I have a div on my page with a class assigned and it that looks like this:
<div class="region region-content">.
Now I want to style this from my css file so I created a new style like this:
.region .region-content {
background-color:#ccc;
padding:10px;
}
but it doesn't get applied, how come? What am I doing wrong? :o
the url is: http://www.vancouverrealestatecenter.com/dev/?q=about_us# and the style is on the bottom of colors.css

Thanks for assistance!
Ron

Evertjan.

unread,
Nov 24, 2012, 6:25:42 PM11/24/12
to
cerr wrote on 24 nov 2012 in comp.infosystems.www.authoring.stylesheets:

> Hi,
>
> I have a div on my page with a class assigned and it that looks like
> this: <div class="region region-content">.

That is not "a" class.

It is TWO classes.

> Now I want to style this from my css file so I created a new style
> like this:
> .region .region-content {
> background-color:#ccc;
> padding:10px;
>}

Here you are applying css to an element
that has class='region-content'
with a parent[!!!] element that has class='region'.

> but it doesn't get applied,

It does, having the right HTML.

Try this HTML:

<div class='region'>
aaa
<div class='region-content'>
Now look here!
</div>
zzz
</div>


> how come? What am I doing wrong? :o

You are just making up your own specifications,
not applying the css specifications as they actually are.

Bad habit.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Chris F.A. Johnson

unread,
Nov 24, 2012, 6:18:54 PM11/24/12
to
On 2012-11-24, cerr wrote:
> Hi,
>
> I have a div on my page with a class assigned and it that looks like this:
><div class="region region-content">.
> Now I want to style this from my css file so I created a new style like this:
> .region .region-content {

That refers to .region-content within an element with class .region

.region, .region-content {

> background-color:#ccc;
> padding:10px;
> }
> but it doesn't get applied, how come? What am I doing wrong? :o
> the url is: http://www.vancouverrealestatecenter.com/dev/?q=about_us# and the style is on the bottom of colors.css
>
> Thanks for assistance!
> Ron


--
Chris F.A. Johnson
<http://torontowebdesign.cfaj.ca/>

Danny

unread,
Nov 24, 2012, 6:43:41 PM11/24/12
to
if you have -> class="quack meow"
your CSS selector to address such elements will be -> .quack.meow {....}
no spaces

cerr

unread,
Nov 24, 2012, 7:05:46 PM11/24/12
to
Yep, great, Thanks a lot! That worked out for me! :)

cerr

unread,
Nov 24, 2012, 7:06:50 PM11/24/12
to
Evertjan,

Thanks, that helped! Got it resolved now! :)

dorayme

unread,
Nov 24, 2012, 7:21:18 PM11/24/12
to
In article <b4dc38a2-3340-49dd...@googlegroups.com>,
cerr <ron.e...@gmail.com> wrote:

>
> I have a div on my page with a class assigned and it that looks like this:
> <div class="region region-content">.
> Now I want to style this from my css file so I created a new style like this:
>
> .region .region-content {
> background-color:#ccc;
> padding:10px;
> }

Your DIV has two classes. You want to style one or both? If one, just

.region {...}

or

.region-content { ... }

If you want to style both

.region, .region-content { ... }

Note the comma in the last.

--
dorayme

cerr

unread,
Nov 25, 2012, 12:50:47 AM11/25/12
to
Ah now, that works as well, cool! Thanks for that hint too dorayme!

Jukka K. Korpela

unread,
Nov 25, 2012, 1:45:14 AM11/25/12
to
2012-11-25 2:21, dorayme wrote:

> Your DIV has two classes. You want to style one or both?

An expression like "styling a class" is not technically correct, and it
may confuse people. In CSS, we "style" (assign properties to) elements
or pseudo-elements. We may do this using class selectors, but they are
just ways to select the elements to style.

> If one, just
>
> .region {...}

Such a rule applies to all elements in class "region".

> or
>
> .region-content { ... }

Such a rule applies all elements in class "region-content".

> If you want to style both
>
> .region, .region-content { ... }
>
> Note the comma in the last.

Such a rule applies all elements that belong to class "region" or to
class "region-content" (or both).

A rule like the following applies to any element that belong to both
class "region" and to class "region-content":

.region.region-content { ... }

Given the (lack of) context and explanations of the problem, it is
impossible to say which of the four alternatives is or are suitable.
Each of the rules applies to the element in the question, but this does
not mean that they are equivalent. The selector
.region.region-content
is more specific than the simple class selectors in other alternatives.
This may matter, if there are other CSS rules that apply to the element.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

dorayme

unread,
Nov 25, 2012, 2:04:36 AM11/25/12
to
In article <k8sepq$6r7$1...@dont-email.me>,
"Jukka K. Korpela" <jkor...@cs.tut.fi> wrote:

> An expression like "styling a class" is not technically correct

Neither is "The sun has risen..." but we still use it these days as a
shorthand for something more complicated to describe.

--
dorayme

Swifty

unread,
Nov 25, 2012, 2:17:02 AM11/25/12
to
On 25/11/2012 07:04, dorayme wrote:
> Neither is "The sun has risen..." but we still use it these days as a
> shorthand for something more complicated to describe.

Never being one to miss an opportunity to wander off into
Physics/Metaphysics...

Relativity states that observers in differnt places will experience the
same event in different ways. A person observing the Earth from the moon
will see that the Earth is rotating, whilst the person on the Earth sees
the sun as rising.

An as anyone with children will know, time moves more slowly in a moving
vehicle...

--
Steve Swift
http://www.swiftys.org.uk/

Jukka K. Korpela

unread,
Nov 25, 2012, 2:22:20 AM11/25/12
to
2012-11-25 9:04, dorayme wrote:

> In article <k8sepq$6r7$1...@dont-email.me>,
> "Jukka K. Korpela" <jkor...@cs.tut.fi> wrote:
>
>> An expression like "styling a class" is not technically correct
>
> Neither is "The sun has risen..."

Why wouldn't it be? (Since movement is relative, it can be described
from any suitable perspective.)

> but we still use it these days as a
> shorthand for something more complicated to describe.

It's not a shorthand.

ObCSS: There are shorthand properties in CSS. They are among the most
common sources of confusion, but that's beside the point.

The point is that the expression "styling a class" leads to a confusion.
The present discussion is a good example of that.


--
Yucca, http://www.cs.tut.fi/~jkorpela/

dorayme

unread,
Nov 25, 2012, 2:27:50 AM11/25/12
to
In article <k8sgld$lde$1...@speranza.aioe.org>,
Swifty <steve....@gmail.com> wrote:

> Relativity states that observers in differnt places will experience the
> same event in different ways.

Assuming, of course, that there is an objective sense to "the same
event". <g>

--
dorayme

tlvp

unread,
Nov 25, 2012, 3:39:36 AM11/25/12
to
Shorthand/shortcuts is/are useful. When I say "I'm reading Hemingway's
little novella", I'm likely to mean "I'm reading 'The Old Man and the
Sea'", by which I really mean, "I'm reading the book, by Hemingway, called
'The Old Man and the Sea'", which in turn is just short for "I'm reading
the pages of Hemingway's book 'The Old Man and the Sea'", which in turn
expands to the more fully accurate understanding, "I'm reading the text on
the pages of Hemingway's book 'The Old Man and the Sea'." Where to stop?
Whether even to begin?

Cheers, -- tlvp
--
Avant de repondre, jeter la poubelle, SVP.

dorayme

unread,
Nov 25, 2012, 3:52:50 AM11/25/12
to
In article <k8sgvd$fcj$1...@dont-email.me>,
"Jukka K. Korpela" <jkor...@cs.tut.fi> wrote:

> 2012-11-25 9:04, dorayme wrote:
>
> > In article <k8sepq$6r7$1...@dont-email.me>,
> > "Jukka K. Korpela" <jkor...@cs.tut.fi> wrote:
> >
> >> An expression like "styling a class" is not technically correct
> >
> > Neither is "The sun has risen..."
>

> Why wouldn't it be? (Since movement is relative, it can be described
> from any suitable perspective.)
>

Because "The sun only appears to rise, it does not really rise" is not
nonsense. And there is a social context and a history behind all this
that gave rise to the expression.

> > but we still use it these days as a
> > shorthand for something more complicated to describe.
>
> It's not a shorthand.
>

It is shorter than describing the truer position. On the one hand. On
the other hand, it is shorter than describing the truer position. That
makes it shorthand.

--
dorayme

Osmo Saarikumpu

unread,
Nov 25, 2012, 10:11:55 AM11/25/12
to
On 25.11.2012 0:50, cerr wrote:

> ..region .region-content {
> background-color:#ccc;
> padding:10px;
> }
> but it doesn't get applied, how come? What am I doing wrong?

The selectors (.region .region-content) are not matching the markup as
you are expecting. Instead, that's short for:

*.region *.region-content {...}

<p>Which <q title="SelectORacle: Helping further the cause of
understanding standards!"
cite="http://gallery.theopalgroup.com/selectoracle/">selects any element
with a class attribute that contains the word region-content that is a
descendant of any element with a class attribute that contains the word
region.</q></p>

HTH (in future cases),
Osmo
0 new messages