Help With CSS Selectors

[Nathan Sokalski]

I apologize for asking an ASP.NET newsgroup a question about CSS, but I do
not know of any CSS newsgroups. I have a page with many areas that are
composed of the following elements in the following layout:

<td class="mystyle">
<a></a>
<span></span>
<img/>
<span></span>
</td>

For the td element, I obviously used the following selector:

..mystyle{}

For the a and img elements, I would have thought I would use

td.mystyle>a{}
td.mystyle>img{}

Since the a and img elements are immediate children of the td element, but
this did not seem to work, but the following did:

td.mystyle a{}
td.mystyle img{}

Can someone tell me why the > did not work? This is my first time using the

> technique in CSS, so maybe I am doing something wrong.

The span elements were a little harder, since there are two of them. I tried
the following for the first span:

td.PoemRating span:first-child{}

This did not work, so I am going to guess that it is because the span is not
the first child, only the first child that is a span. Is there a way to take
care of the span elements (without giving them a class attribute, if this is
the only way, I can accept that)? Thank you for any help that anyone can
provide.

 

[Nathan Sokalski]

After a little research, I found that I was correct about the :first-child
pseudo-class, so I tried the following instead:

td.mystyle *:first-child+span
OR
td.mystyle a:first-child+span

Neither of these worked either, but I think I may have found the problem,
but I don't have IE7 so tell me if this is correct:

I am using IE6, and if I understand several of the websites I looked at, IE6
does not support > or :first-child in CSS stylesheets. It did sound,
however, like IE7 did. Is this correct? This would explain why my attempts
seemed right (maybe they really aren't, but they at least seemed that way)
but still didn't work. Am I correct in saying this?

 

[prabha1912]

Hi,

http://www.w3.org/TR/REC-CSS2/selector.html#first-child

May be this would help u..


Regards

Prabha @ Ammu

I apologize for asking an ASP.NET newsgroup a question about CSS, but I do
not know of any CSS newsgroups. I have a page with many areas that are
composed of the following elements in the following layout:

<td class="mystyle">
    <a></a>
    <span></span>
    <img/>
    <span></span>
</td>

For the td element, I obviously used the following selector:

.mystyle{}

For the a and img elements, I would have thought I would use

td.mystyle>a{}
td.mystyle>img{}

Since the a and img elements are immediate children of the td element, but
this did not seem to work, but the following did:

td.mystyle a{}
td.mystyle img{}

Can someone tell me why the > did not work? This is my first time using the
 > technique in CSS, so maybe I am doing something wrong.

The span elements were a little harder, since there are two of them. I tried
the following for the first span:

td.PoemRating span:first-child{}

This did not work, so I am going to guess that it is because the span is not
the first child, only the first child that is a span. Is there a way to take
care of the span elements (without giving them a class attribute, if this is
the only way, I can accept that)? Thank you for any help that anyone can
provide.

Hi

 

[Just Me]

The problem is that IE6 / 7 does not seem to be fully CSS compliant.

If you use your example in Firefox, this works as expected. IE appears to
break the rules over and over again. I could quote you loads of examples of
where IE fails to conform to CSS, here's two ive found in the last few days.

1.) Cannot style Select Option Elements Correctly. Will not allow other
fonts in the list or format borders on list items. Firefox does.

2.) Border precedence on table cells, Fails to observe the reccomendations
of CSS, Firefox works as expected.

So, if in doubt, just check it on Firefox first before you blow your mind
thinking you have coded it incorrectly, its normally is IE that fails in
these instances in my experience. Its a shame, as in many other things I
really like IE, but from a developers point of view it has issues.

For general positioning, I normally develop on Firefox first and then it
usually works in IE, but not the other way around.

Cheers

 

[prabha1912]

Hi,

is a type of Advanced (Child)selector,Unfortunately, while modern browsers such as Firefox and Safari support these advanceed selectors, IE6 and below do not.

Just remember to avoid using these more advanced selectors for
anything critical to the functioning of your site.

Regards
Prabha @ Ammu.

 

[Just Me]

Didnt I just say that ?

FYI : IE7 does not appear to support this selector either.




Hi,

is a type of Advanced (Child)selector,Unfortunately, while modern browsers
such as Firefox and Safari support these advanceed selectors, IE6 and
below do not.

Just remember to avoid using these more advanced selectors for
anything critical to the functioning of your site.

Regards
Prabha @ Ammu.