From: Jeff Thies on
David Stone wrote:
> In article <i279od$vsn$1(a)news.albasani.net>,
> Jeff Thies <jeff_thies(a)att.net> wrote:
>
>> BootNic wrote:
>>> On Wed, 21 Jul 2010 12:35:22 -0400
>>> BootNic <bootnic.bounce(a)gmail.com> wrote:
>>>
>>>> On Wed, 21 Jul 2010 08:18:01 -0400
>>>> Jeff Thies <jeff_thies(a)att.net> wrote:
> [snip]
>>>>> <body id=“body_id” class=“new_class” ...
>>>>>
>>>>> How do I write the rule so it has a higher “score”, just doing
>>>>> this:
>>>>>
>>>>> .new_class #side_nav is lower than #body_id #side_nav
>>>> #body_id .new_class #side_nav
>>> There should be no space after #body_id
>>>
>>> #body_id.new_class #side_nav
>> Thanks, that's what I missed!
>>
>> (if that is in the CSS specs I couldn't find it)
>
> It's easier to find once you know what to look for!
>
> In http://www.w3.org/TR/CSS21/selector.html#descendant-selectors
> [quote]
> A descendant selector is made up of two or more selectors separated by
> white space. A descendant selector of the form "A B" matches when an
> element B is an arbitrary descendant of some ancestor element A.
> [/quote]

>
> And...
>
> In http://www.w3.org/TR/CSS21/selector.html#class-html
> [quote]
> To match a subset of "class" values, each value must be preceded
> by a ".". Example(s):
> For example, the following rule matches any P element whose "class"
> attribute has been assigned a list of space-separated values that
> includes "pastoral" and "marine":
> p.marine.pastoral { color: green }
> [/quote]


>
> In your case, writing #body_id .new_class means selecting for
> something of class new_class which is a descendant of the
> element with id body_id, rather than selecting an element
> whose id is body_id and which also is of the class new_class

Got it. I knew you could do p.some_class, for me at least, the
extension to #some_id.some_class was not obvious. There was not a
similar example.

But now I know and it's not a bad idea to reread up on this.

Thanks,
Jeff
From: Marious Barrier on
On 07/21/2010 08:18 AM, Jeff Thies wrote:
> My goal is fewer templates and just one stylesheet per site.
>
> To get there I usually add an id in the body tag.
>
> <body id="body_id" ...
>
> Then if I want to change the side_nav it is just:
>
> #body_id #side_nav{...

No need to say #oneid #anotherid
All IDs are unique.
From: Chris F.A. Johnson on
On 2010-07-22, Marious Barrier wrote:
> On 07/21/2010 08:18 AM, Jeff Thies wrote:
>> My goal is fewer templates and just one stylesheet per site.
>>
>> To get there I usually add an id in the body tag.
>>
>> <body id="body_id" ...
>>
>> Then if I want to change the side_nav it is just:
>>
>> #body_id #side_nav{...
>
> No need to say #oneid #anotherid
> All IDs are unique.

It may be necessary to increase the specificity.

--
Chris F.A. Johnson
<http://torontowebdesign.cfaj.ca>
From: Evertjan. on
Chris F.A. Johnson wrote on 22 jul 2010 in
comp.infosystems.www.authoring.stylesheets:

> On 2010-07-22, Marious Barrier wrote:
>> On 07/21/2010 08:18 AM, Jeff Thies wrote:
>>> My goal is fewer templates and just one stylesheet per site.
>>>
>>> To get there I usually add an id in the body tag.
>>>
>>> <body id="body_id" ...
>>>
>>> Then if I want to change the side_nav it is just:
>>>
>>> #body_id #side_nav{...
>>
>> No need to say #oneid #anotherid
>> All IDs are unique.
>
> It may be necessary to increase the specificity.
>

New IDs are always welcome.

Indeed IDs are not unique over multiple pages.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
From: Jeff Thies on
Chris F.A. Johnson wrote:
> On 2010-07-22, Marious Barrier wrote:
>> On 07/21/2010 08:18 AM, Jeff Thies wrote:
>>> My goal is fewer templates and just one stylesheet per site.
>>>
>>> To get there I usually add an id in the body tag.
>>>
>>> <body id="body_id" ...
>>>
>>> Then if I want to change the side_nav it is just:
>>>
>>> #body_id #side_nav{...
>> No need to say #oneid #anotherid
>> All IDs are unique.
>
> It may be necessary to increase the specificity.
>
That and each template has a different body ID. That way I can leave the
html alone and change the look of the page by styling as a descendant of
that page's ID.

So:

#template_1 #side_nav{...
#template_2 #side_nav{different styles...
First  |  Prev  |  Next  |  Last
Pages: 1 2 3 4
Prev: ping Dorayme
Next: Most important for mobile stylesheet?