Help With CSS Selectors

Discussion in 'ASP .Net' started by Nathan Sokalski, Mar 24, 2008.

  1. 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

    http://www.nathansokalski.com/
     
    Nathan Sokalski, Mar 24, 2008
    #1
    1. Advertising

  2. 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?
    --
    Nathan Sokalski

    http://www.nathansokalski.com/

    "Nathan Sokalski" <> wrote in message
    news:...
    >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
    >
    > http://www.nathansokalski.com/
    >
     
    Nathan Sokalski, Mar 24, 2008
    #2
    1. Advertising

  3. Nathan Sokalski

    Guest

    Hi,

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

    May be this would help u..


    Regards

    Prabha @ Ammu



    On Mar 24, 7:00 am, "Nathan Sokalski" <> wrote:
    > 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
    > ://www.nathansokalski.com/




    Hi
     
    , Mar 24, 2008
    #3
  4. Nathan Sokalski

    Just Me Guest

    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



    "Nathan Sokalski" <> wrote in message
    news:...
    > 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?
    > --
    > Nathan Sokalski
    >
    > http://www.nathansokalski.com/
    >
    > "Nathan Sokalski" <> wrote in message
    > news:...
    >>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
    >>
    >> http://www.nathansokalski.com/
    >>

    >
    >
     
    Just Me, Mar 24, 2008
    #4
  5. Nathan Sokalski

    Guest

    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.


    On Mar 24, 1:12 pm, "Just Me" <news.microsoft.com> wrote:
    > 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
    >
    > "Nathan Sokalski" <> wrote in message
    >
    > news:...
    >
    >
    >
    > > 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?
    > > --
    > > Nathan Sokalski
    > >
    > >http://www.nathansokalski.com/

    >
    > > "Nathan Sokalski" <> wrote in message
    > >news:...
    > >>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
    > >>
    > >>http://www.nathansokalski.com/- Hide quoted text -

    >
    > - Show quoted text -
     
    , Mar 24, 2008
    #5
  6. Nathan Sokalski

    Just Me Guest

    Didnt I just say that ?

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


    <> wrote in message
    news:...


    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.


    On Mar 24, 1:12 pm, "Just Me" <news.microsoft.com> wrote:
    > 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
    >
    > "Nathan Sokalski" <> wrote in message
    >
    > news:...
    >
    >
    >
    > > 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?
    > > --
    > > Nathan Sokalski
    > >
    > >http://www.nathansokalski.com/

    >
    > > "Nathan Sokalski" <> wrote in message
    > >news:...
    > >>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
    > >>
    > >>http://www.nathansokalski.com/- Hide quoted text -

    >
    > - Show quoted text -
     
    Just Me, Mar 24, 2008
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Matt Beckwith

    Class and ID Selectors (CSS question)

    Matt Beckwith, Jul 12, 2003, in forum: HTML
    Replies:
    3
    Views:
    391
    David Dorward
    Jul 13, 2003
  2. Derek Clarkson
    Replies:
    3
    Views:
    387
    Derek Clarkson
    Nov 7, 2003
  3. Nik Coughin

    css - descendant selectors

    Nik Coughin, Jan 28, 2004, in forum: HTML
    Replies:
    2
    Views:
    392
    Alliss
    Jan 29, 2004
  4. Jeanne D

    Question about CSS selectors

    Jeanne D, Oct 15, 2005, in forum: HTML
    Replies:
    8
    Views:
    388
    Jeanne D
    Oct 16, 2005
  5. rodchar

    css selectors help

    rodchar, Jul 17, 2008, in forum: ASP .Net
    Replies:
    3
    Views:
    355
    rodchar
    Jul 20, 2008
Loading...

Share This Page