Re: [css-d] descendant selectors
Hi John:
> I would have guessed this is the way to go about it. Maybe you can give
> the a class and then assign it a background-image ? Although, I'm not
> sure that's the best route.
you know what, i shouldn't have written the question to begin with, just
moving too fast (or faster than my brain or something like that).
i had "commented out" some of the css, made a separate page and that's
why i wasn't seeing it in IE7 and 6!
so you're right, it was right to begin with.
cheers
Donna
>
> On 3/16/07, Donna Jones <[EMAIL PROTECTED]> wrote:
>
>>hi all, i, and a couple of friends, are trying to figure out a
>>"descentant selector" issue.
>>
>>say you have this in the css:
>>
>>#content li a img {border: 2px solid green;}
>>
>>your html is
>>
>>some words
>>
>>
>>with Firefox the image is styled. With IE7 or 6 it is not. I am leary
>>about the "logic" and it doesn't seem to me like "a" should be able to
>>have a "img" child in that context BUT firefox is reading it, so makes
>>me wonder. But, then why is IE not reading it. I wouldn't think it
>>would be "too advanced" for IE.
>>
>>thanks very much,
>>Donna
>>
>>
>>
>>--
>>Donna Jones
>>Portland, Maine
>>207 772 0266
>>www.westendwebs.com
>>
>>i'm participating in ShutdownDay on March 24, Saturday,
>>http://shutdownday.org/
>>__
>>css-discuss [EMAIL PROTECTED]
>>http://www.css-discuss.org/mailman/listinfo/css-d
>>IE7 information -- http://css-discuss.incutio.com/?page=IE7
>>List wiki/FAQ -- http://css-discuss.incutio.com/
>>Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
--
Donna Jones
Portland, Maine
207 772 0266
www.westendwebs.com
i'm participating in ShutdownDay on March 24, Saturday,
http://shutdownday.org/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] descendant selectors
I would have guessed this is the way to go about it. Maybe you can give
the a class and then assign it a background-image ? Although, I'm not
sure that's the best route.
On 3/16/07, Donna Jones <[EMAIL PROTECTED]> wrote:
>
> hi all, i, and a couple of friends, are trying to figure out a
> "descentant selector" issue.
>
> say you have this in the css:
>
> #content li a img {border: 2px solid green;}
>
> your html is
>
> some words
>
>
> with Firefox the image is styled. With IE7 or 6 it is not. I am leary
> about the "logic" and it doesn't seem to me like "a" should be able to
> have a "img" child in that context BUT firefox is reading it, so makes
> me wonder. But, then why is IE not reading it. I wouldn't think it
> would be "too advanced" for IE.
>
> thanks very much,
> Donna
>
>
>
> --
> Donna Jones
> Portland, Maine
> 207 772 0266
> www.westendwebs.com
>
> i'm participating in ShutdownDay on March 24, Saturday,
> http://shutdownday.org/
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] descendant selectors
hi all, i, and a couple of friends, are trying to figure out a
"descentant selector" issue.
say you have this in the css:
#content li a img {border: 2px solid green;}
your html is
some words
with Firefox the image is styled. With IE7 or 6 it is not. I am leary
about the "logic" and it doesn't seem to me like "a" should be able to
have a "img" child in that context BUT firefox is reading it, so makes
me wonder. But, then why is IE not reading it. I wouldn't think it
would be "too advanced" for IE.
thanks very much,
Donna
--
Donna Jones
Portland, Maine
207 772 0266
www.westendwebs.com
i'm participating in ShutdownDay on March 24, Saturday,
http://shutdownday.org/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Descendant Selectors Based on IDs
Thanks Glenn, Rob, and Tyson. I can now start writing cleaner, more sensible CSS and HTML! Cheers, Dagmar __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Descendant Selectors Based on IDs
On May 3, 2006, at 5:56 AM, Dagmar Noll wrote: > #header ul > #header p > #header img > #sections h1 > #sections h2 > #section p > > If this is valid CSS, are there any major red flags regarding using > descendant selectors based on IDs? All of the above will work perfectly. However, keep in mind that "#header p" will style all p tags inside the header, so if you had: Blah Yadda Both 'Blah' and 'Yadda' will get styled. To style only 'Blah', you'd use the child selector ">", which IE doesn't support (of course). It's supported in IE7, though. -Tyson __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Descendant Selectors Based on IDs
Hi all. Are descendant selectors based off of IDs valid CSS? In case I am not using the right language (please set me straight if I'm not), I mean this: #header ul #header p #header img #sections h1 #sections h2 #section p If this is valid CSS, are there any major red flags regarding using descendant selectors based on IDs? I remember reading something a year or two ago that there was some problem with this set-up. I believe it had to do with browser support, but I'm not sure and I can't remember where I read it, so I want to check my assumptions before moving forward to base a whole site's css styling on this set-up. Regards, Dagmar __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Descendant Selectors
> a selector of "p"
> would be sufficient to uniquely identify the needed
> element. But let's
> say there's another paragraph elsewhere on the page;
> in that case,
> "#header p" would be sufficient because #header has
> to be unique if
> you're using valid markup.
Great explanation! I pretty much have this wrapped up
with the last explanation. I wanted to expound on my
situation and ask for additional feedback.
My experimental exercise relates to creating HTML
newsletter and how webmail script render HTML and CSS.
My interests do not fall into HTML vs plain text email
discussion. This exercise is valid and educational in
purpose.
Even after reading about StyleinEmail, the topic is
still allusive especially in Gmail. I began a trial
and error process in styling approaches. Then I
captured the webmail clientÂ’s rendition. The HTML
documents reaffirm several points in StyleinEmail; yet
open additional discrepancies. Webmail clients have
better support for CSS then the StyleinEmail alludes.
Their shortcomings relate to how their scripts rewrite
HTML newsletters. Their stylesheets often over-ride
your inline stylesheet. In other scenarios, it just
strips your font-family declarations. Each webmail
client handles it in a different manner.
My question about descendant selector relates to
styles that do not become overridden by the webmail.
As mentioned StyleinEmail, you may need verbose
attributes in your html for maximum compatibility.
Gmail strips IDs and classes from HTML emails;
font-family from inline styles. However, it keeps
font-size in inline style; and tag.
Hotmail and Yahoo fair better with CSS merging inline
stylesheets with its own style sheet. So my questions
relate to descendant selectors in a vast complicated
stylesheet.
Would #myheader p suffice as original situation
described?
> #myContainer table tr td p
Or do I need verbose style declaration?
Could you simplify to #myContainer p { }; or #myheader
td { }?
Would these styles override #message p { } created
webmail?
(#message would wrap #myContainer)
This topic is not for the faint hearted. Please add
whatever insight you feel relevant.
__
Discover Yahoo!
Use Yahoo! to plan a weekend, have fun online and more. Check it out!
http://discover.yahoo.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Descendant Selectors
Robert Neville wrote:
Can you add descendant ID selectors to an ID selector?
#container #header, #container #footer
Yes, but you may not always need to include the containing element in
your selector. Because id's are unique per page, you may not need the
added specificity a compound selector offers.
Would a better approach be the ID selector with the
class selector?
#container .header, #container .footer
That depends on whether or not you will need to reuse the styling for
more than one element on the page; if so, you'd want to use a class. If
you only have one element (per page) with the id "header" and one
element with the id "footer", then using and id is appropriate and
offers greater specificity when necessary. For this particular case I'd
use id's; #container #header {foo:foo;}
In my scenario, the header div is not a direct
descendant of the container div. My HTML uses a table
structure for lowest common denominator render
engines. The whole project is experimental.
I think you are confusing a child element with a descendant element. A
child element is an element that is connected to and *directly below*
another element in the document tree. For example:
Here, is a child of .
A descendant element is any element connected to and *lower* in the
document tree than another element. For example:
Here, is a descendant of .
snippet follows below. Let me know if you could
confirm various methods for declaring descendant
selectors.
I am trying to avoid doing the following and get
beyond the basics.
#container table tr td div#header p, #container table
tr td div#footer p
If for some reason you need a level of specificity higher than a single
id offers, then you could certainly use your example. The choice isn't
really a matter of wrong or right; it's more a matter of practicality,
level of complexity, and best practice. Technically speaking #header
{foo:foo;} would cover your needs in most scenarios. Just keep in mind
that you do not have to name every element in the document tree for
every rule set an you should be fine.
--
Best regards,
Michael Wilson
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Descendant Selectors
On 14 Jun 2005, at 9:40 am, Robert Neville wrote:
Can you add descendant ID selectors to an ID selector?
#container #header, #container #footer
Yes.
But it is not often needed: an ID selector is always unique on a page
anyway.
Would a better approach be the ID selector with the
class selector?
#container .header, #container .footer
Not better, not worse than the previous one.
The difference with the previous one is, you can use a class selector
multiple times on a page.
Then you can have
#box1 .emphasisedText {font-weight:bold; color:lime;}
#box2 .emphasisedText {font-weight:normal; color:yellow}
I'm lime coloured and bold
weighted
I'm yellow coloured and normal
weighted
In my scenario, the header div is not a direct
descendant of the container div. My HTML uses a table
structure for lowest common denominator render
engines. The whole project is experimental. A code
snippet follows below. Let me know if you could
confirm various methods for declaring descendant
selectors.
Doesn't matter how deeply nested the descendant is, it is always a
descendant of it's parent.
#container table tr td div#header p, #container table
tr td div#footer p
You only add more specificity with those selectors
#parent #child vs #parent table #child
the second one would only select something when the #child is a
descendent of a table that is a descendent of #parent.
Philippe
---
Philippe Wittenbergh
[css-d] Descendant Selectors
I have a quick question about descendant selectors. Even though the following site (http://css.maxdesign.com.au/selectutorial/) has given me considerable insight, this question relates to additional clarification when nesting selectors. Can you add descendant ID selectors to an ID selector? #container #header, #container #footer Would a better approach be the ID selector with the class selector? #container .header, #container .footer In my scenario, the header div is not a direct descendant of the container div. My HTML uses a table structure for lowest common denominator render engines. The whole project is experimental. A code snippet follows below. Let me know if you could confirm various methods for declaring descendant selectors. I am trying to avoid doing the following and get beyond the basics. #container table tr td div#header p, #container table tr td div#footer p __ Do you Yahoo!? Read only the mail you want - Yahoo! Mail SpamGuard. http://promotions.yahoo.com/new_mail __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] descendant selectors, background-image position, and Firefox
> > Both the CSS and XHTML are valid. Here's the link to the page:
> >
> > http://chnm.gmu.edu/history120/new/nav-test.html
>
> this is the ruleset for your current state
>
> #pre18thcentury a#nav-pre18,
> #18thcentury a#nav-18,
> #19thcentury a#nav-19,
> #20thcentury a#nav-20 {
> background-position:0 -40px;
> }
>
> this is what Firefox Java script console says:
>
> "Error: Expected identifier for ID selector but found '#18thcentury'.
> Ruleset ignored due to bad selector.
> Source File: http://chnm.gmu.edu/history120/new/nav-test.html
> Line: 85"
You cannot define your IDs using numbers as the first character.
>From W3C:
"In CSS 2.1, identifiers (including element names, classes, and IDs in
selectors) can contain only the characters [A-Za-z0-9] and ISO 10646
characters U+00A1 and higher, plus the hyphen (-) and the underscore (_);
they cannot start with a digit."
Change those to something like #eighteenthcentury and that should correct
the problem.
Regards,
Ron
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] descendant selectors, background-image position, and Firefox
Jeremy Boggs schrieb:
I'm trying to create a navigation bar using images as tabs, and using
the conditional descendant selectors to choose the "current" link. I
have an unordered list of four links:
...
the a tag's background image is 80px high. the non-current state as a
background position of 0 0, with a height of 40px. to display the
"current" link, I put an id in the UL tag and change the background
position of the relevant a tag to 0 -40px. this works fine in Safari,
but in no other browser.
I also change the background-position to 0 -40px on the a:hover state,
which works fine in all the browsers I've checked, so I'm thinking
that I'm doing something wrong with the descendant selector. but it's
weird that Safari recognizes it.
Both the CSS and XHTML are valid. Here's the link to the page:
http://chnm.gmu.edu/history120/new/nav-test.html
this is the ruleset for your current state
#pre18thcentury a#nav-pre18,
#18thcentury a#nav-18,
#19thcentury a#nav-19,
#20thcentury a#nav-20 {
background-position:0 -40px;
}
this is what Firefox Java script console says:
"Error: Expected identifier for ID selector but found '#18thcentury'.
Ruleset ignored due to bad selector.
Source File: http://chnm.gmu.edu/history120/new/nav-test.html
Line: 85"
Ingo
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] descendant selectors, background-image position, and Firefox
I'm trying to create a navigation bar using images as tabs, and using the conditional descendant selectors to choose the "current" link. I have an unordered list of four links: Pre-18th 18th 19th 20th the a tag's background image is 80px high. the non-current state as a background position of 0 0, with a height of 40px. to display the "current" link, I put an id in the UL tag and change the background position of the relevant a tag to 0 -40px. this works fine in Safari, but in no other browser. I also change the background-position to 0 -40px on the a:hover state, which works fine in all the browsers I've checked, so I'm thinking that I'm doing something wrong with the descendant selector. but it's weird that Safari recognizes it. Both the CSS and XHTML are valid. Here's the link to the page: http://chnm.gmu.edu/history120/new/nav-test.html thanks in advance for any help! best, Jeremy __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
