Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > css element within element....

Reply
Thread Tools

css element within element....

 
 
WindAndWaves
Guest
Posts: n/a
 
      02-02-2005
Hi Gurus

This question relates to stylesheets.

Is it possible to say to define the behaviour of classes, elements, etc... within other elements

For example of the A-elements within the <DIV CLASS="content">, if so, how do i do that?

Sorry I am really new to this kind of thing and I do not have a computer background.

I have seen stuff around like A > .content {....} is that the kind of thing I should be using? If so, what should I watch for?

Cheers


- Nicolaas


 
Reply With Quote
 
 
 
 
rf
Guest
Posts: n/a
 
      02-02-2005
"WindAndWaves" <(E-Mail Removed)> wrote

> Hi Gurus


Gurus is out to lunch. I'm filling in.

>
> This question relates to stylesheets.
>
> Is it possible to say to define the behaviour of classes, elements, etc...

within other elements
>
> For example of the A-elements within the <DIV CLASS="content">, if so, how

do i do that?

div.content a

Check the specs:
http://www.w3.org/TR/REC-CSS2/selector.html


 
Reply With Quote
 
 
 
 
Travis Newbury
Guest
Posts: n/a
 
      02-02-2005
WindAndWaves wrote:
> This question relates to stylesheets.
> Is it possible to say to define the behaviour of classes, elements,

etc... within other elements

Yes, see the source of this page for an example.
http://www.redmelon.net/tstme/4corners/

--
-=tn=-

 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      02-02-2005
"WindAndWaves" <(E-Mail Removed)> wrote:

>This question relates to stylesheets.
>
>Is it possible to say to define the behaviour of classes, elements, etc... within other elements


Yes.

>For example of the A-elements within the <DIV CLASS="content">, if so, how do i do that?


div.content a {foo:bar;}

>Sorry I am really new to this kind of thing and I do not have a computer background.


The word you are looking for is "selector". A selector in CSS is the
part of a style rule that specifies which elements the properties
deined the in rule apply to. CSS includes a large number of different
selectors that can be combined in many possiblle ways.

The simplest selector is an element selector
div {}
which selects all elements of that type.
A class selector
..foo {}
selects all elements with that class. These can be combined to select
all elements of a given type with that class.
div.foo {}

You're asking about the descendent selector that selects all elements
that descendents of another element. The descendent selector is just a
space.

div p {}
selects all p elements that are descendets of divs.
div.foo p b.bar {}
selects all b elements with a class of bar that are descendents of p
elements that are themselves descendents of div elements with a class
of foo.

See http://www.w3.org/TR/CSS21/selector.html

But be aware that some browsers (stand up IE) don't support a lot of
the selectors.
http://www.blooberry.com/indexdot/cs.../selectors.htm
isn't fully complete or up to date but does tell you what IE6 does and
doesn't support which is the most important thing to know today.

>I have seen stuff around like A > .content {....} is that the kind of thing I should be using?


That's a child selector. It works like a descendent selector but only
applies to immediate children.
<div class="foo">
<p></p>
<div>
<p><p>
</div>
<p></p>
</div>

..foo > p {}
applies to the first and third paragraphs because they are children of
the element with class foo but not to the second because it is a
grandchild.

>If so, what should I watch for?


IE doesn't support child selectors. If you write it with spaces then
IE will treat it as a descendent selector. If you write it without
spaces then IE will ignore it.
..foo > p is treated as .foo p
..foo>p is ignored altogether.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
Barbara de Zoete
Guest
Posts: n/a
 
      02-02-2005
On Thu, 3 Feb 2005 00:17:21 +1300, WindAndWaves <(E-Mail Removed)> wrote:

> This question relates to stylesheets.
>


Then why do you come to alt.html?
I've added ciwas, and f'up set hence.

> Is it possible to say to define the behaviour of classes, elements, etc...
> within other elements
>
> For example of the A-elements within the <DIV CLASS="content">, if so, how do
> i do that?
>
> Sorry I am really new to this kind of thing and I do not have a computer
> background.
>


That's okay. We've all started with CSS at some time in our lives. But, if
you're that new with this, perhaps you should start with on-line tutorials to
get some idea of how CSS works:

<http://www.w3.org/MarkUp/Guide/Style.html> for example.

There is much more. Google for it.

As a rule of thumb:
- Start styling the elements that you use in the markup of your pages, for
example <p>, <h#>, <div> and get some experience with that, get a feel for what
CSS is and does;
- When comfortable with styling the single elements, experiment some with
creating (containing) divisions and setting specific styles for those and the
elements inside them, but then you are already somewhat advanced.

Also, lurk in some of the ciwa* groups, especially ciwas. You can learn a great
deal from that. Last, look at the style sheets of sites you visit and like. Try
to understand what you see (combined with the markup).

Play around with (correct) markup and css and when you've created something in
your personal sandbox, there is no harm in comming back here (meaning ciwas) and
ask for help with specific problems. Don't forget to validate code (both markup
and styles) before you ask for help.

<http://validator.w3.org/> for markup and
<http://jigsaw.w3.org/css-validator/> for css

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'
 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      02-02-2005
WindAndWaves wrote:

> Hi Gurus
>
> This question relates to stylesheets.
>
> Is it possible to say to define the behaviour of classes,
> elements, etc... within other elements


Yes

> For example of the A-elements within the <DIV
> CLASS="content">, if so, how do i do that?


div.content a{styles...}

> Sorry I am really new to this kind of thing and I do not
> have a computer background.


Handy tool for you:
http://gallery.theopalgroup.com/selectoracle/

> I have seen stuff around like A > .content {....} is that
> the kind of thing I should be using? If so, what should I
> watch for?


No, that's just a hack to get different browsers to do
different things.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      02-02-2005
Els wrote:
[...]

Oops, didn't see all the other replies before I pressed send..

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
 
Reply With Quote
 
Barbara de Zoete
Guest
Posts: n/a
 
      02-02-2005
On 2 Feb 2005 11:46:50 GMT, Els <(E-Mail Removed)> wrote:

> WindAndWaves wrote:
>
>> I have seen stuff around like A > .content {...} is that
>> the kind of thing I should be using? If so, what should I
>> watch for?

>
> No, that's just a hack to get different browsers to do
> different things.
>


Come again? Using the '>' in a style selector means the author wants all direct
decendents, also know as 'children' to render with a specific style. Thus the
'>' in a selector creates a child selector.
It is only if the spaces are left out, 'foo>bar' instead of 'foo > bar' (that
gets mis-interpreted by IE), that the styles for the selector are ignored by a
certain obscure and faulty browsers aka as IE . Knowing that, might seduce a
webauthor into using the child selector without spaces as a 'hack to get
different browsers do different things'. But that certainly was not the intended
use for the child selector.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'
 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      02-02-2005
"Barbara de Zoete" <(E-Mail Removed)> wrote
> On Thu, 3 Feb 2005 00:17:21 +1300, WindAndWaves <(E-Mail Removed)> wrote:
>
> > This question relates to stylesheets.


> Then why do you come to alt.html?


Probably because the non-existant charter for alt.html includes just about
everything that is done client side.

Besides, these days CSS should be considered an integral part of writing
"HTML".

> I've added ciwas, and f'up set hence.


And I have removed it and reset the followups


 
Reply With Quote
 
Barbara de Zoete
Guest
Posts: n/a
 
      02-02-2005
On Wed, 02 Feb 2005 11:57:33 GMT, rf <rf@.invalid> wrote:

> "Barbara de Zoete" <(E-Mail Removed)> wrote
>> On Thu, 3 Feb 2005 00:17:21 +1300, WindAndWaves <(E-Mail Removed)> wrote:
>>
>> > This question relates to stylesheets.

>
>> Then why do you come to alt.html?

>
> Probably because the non-existant charter for alt.html includes just about
> everything that is done client side.
>
> Besides, these days CSS should be considered an integral part of writing
> "HTML".
>


What was the original logic of creating a newsgroup ciwas? Why shouldn't a
discussion on styles, selectors et cetera be better of there?


--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
XSD restriction of nesting an element within another element with aspecific attribute value? PeteOlcott XML 1 02-05-2009 06:39 AM
the element div cannot be nested within the element 'updatepanel' MU ASP .Net 2 01-14-2009 03:30 PM
how to Update/insert an xml element's text----> (<element>text</element>) HANM XML 2 01-29-2008 03:31 PM
Element TABLE cannot be nested within element 'p' Fred Flintstone ASP .Net 2 09-13-2006 08:15 PM
per the active schema, the element <BR> must be included within a parent element MSNews ASP .Net 1 04-22-2004 04:45 PM



Advertisments