css selectors

Discussion in 'HTML' started by Jon Slaughter, Apr 17, 2007.

  1. Is it possible to refer to an a parent element and modify its attributes?

    Say I have a ul with some links in it:

    <ul>
    <li>
    SomeText
    <a href="...">Link</a>
    </li>
    </ul


    Now I want to change the color of SomeText depending on if a is hovered. (My
    problem is more complicated than this so don't take this example at face
    value... I know its easy to solve here but that is not what I'm asking)

    so if I do something like

    ul li a:hover
    {

    }

    Then the style references everything in a. is there any way to tell it to
    reference li instead?

    I know in this example I can do it easy but in my problem I have nested ul's
    and I need to change the color of a link in the first list when there is a
    hover over a link in the second list(which is a sub list).

    So essentially I want to change the color of a link when a completely
    disjoint link is highlighted.

    Is it possible with css?

    Thanks,
    Jon
     
    Jon Slaughter, Apr 17, 2007
    #1
    1. Advertising

  2. Jon Slaughter

    Ben C Guest

    On 2007-04-17, Jon Slaughter <> wrote:
    > Is it possible to refer to an a parent element and modify its attributes?
    >
    > Say I have a ul with some links in it:
    >
    ><ul>
    > <li>
    > SomeText
    > <a href="...">Link</a>
    > </li>
    ></ul
    >
    >
    > Now I want to change the color of SomeText depending on if a is hovered.


    Not possible with pseudos. Change in pseudo-state can only affect styles
    that apply to descendents, the adjacent sibling, and the descendents of
    the adjacent sibling. Never ancestors.
     
    Ben C, Apr 17, 2007
    #2
    1. Advertising

  3. Jon Slaughter wrote:

    > ul li a:hover
    > {
    >
    > }
    >
    > Then the style references everything in a. is there any way to tell it to
    > reference li instead?


    No, but you have two options:

    ul li:hover
    {
    /* Styles go here.
    * However, there is no way of knowing whether the <a> element
    * is also being hovered. The cursor might be over the <li> but
    * not over the <a>. If you want the <a> to fill he entire area
    * of the <li>, then set it to display:block;height:100%;
    */
    }

    Or attach a small Javascript function to the onmouseover/onmouseout events
    for the <a> element which toggles the class of its parent element.

    --
    Toby A Inkster BSc (Hons) ARCS
    http://tobyinkster.co.uk/
    Geek of ~ HTML/SQL/Perl/PHP/Python*/Apache/Linux

    * = I'm getting there!
     
    Toby A Inkster, Apr 18, 2007
    #3
  4. Toby A Inkster wrote:
    >
    > ul li:hover
    > {
    > /* Styles go here.
    > * However, there is no way of knowing whether the <a> element
    > * is also being hovered. The cursor might be over the <li> but
    > * not over the <a>. If you want the <a> to fill he entire area
    > * of the <li>, then set it to display:block;height:100%;
    > */
    > }


    which will not work in IE6 as IE6 does only understand pseudo-classes
    attached to the a-element. so you need to rely on a JS-function.
    see for example: son of suckerfish
    (http://www.htmldog.com/articles/suckerfish/dropdowns/)

    cheers
    bernhard




    --
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Apr 18, 2007
    #4
  5. Bernhard Sturm wrote:
    > Toby A Inkster wrote:
    >>
    >> ul li:hover
    >> {
    >> /* Styles go here.
    >> * However, there is no way of knowing whether the <a> element
    >> * is also being hovered. The cursor might be over the <li> but
    >> * not over the <a>. If you want the <a> to fill he entire area
    >> * of the <li>, then set it to display:block;height:100%;
    >> */
    >> }

    >
    > which will not work in IE6 as IE6 does only understand pseudo-classes
    > attached to the a-element. so you need to rely on a JS-function.
    > see for example: son of suckerfish
    > (http://www.htmldog.com/articles/suckerfish/dropdowns/)


    Or take advantage of MSIE's proprietary HTC file... My take on Vladdy's
    solution

    LI{ behavior: url(IEFixes.htc);
    /* more specific */
    LI.specialfx{ behavior: url(IEFixes.htc);

    ##### IEFixes.htc:

    <public:component>
    // For MSIE use JScript to attach JS functions to compensate
    // for missing pseudo-class support
    // from Vladdy http://www.vladdy.net/Demos/IEPseudoClassesFix.html
    // updated for html4.01 jnl 3/06
    <public:attach event="onmouseover" onevent="DoHover()">
    <public:attach event="onmouseout" onevent="RestoreHover()">
    <public:attach event="onmousedown" onevent="DoActive()">
    <public:attach event="onmouseup" onevent="RestoreActive()">
    <script type="text/jscript">
    function DoHover(){
    element.className += ' hover';
    }
    function DoActive(){
    element.className += ' active';
    }
    function RestoreHover(){
    element.className = element.className.replace(/\shover\b/,'');
    }
    function RestoreActive(){
    element.className = element.className.replace(/\sactive\b/,'');
    }
    </script>
    </public:component>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Apr 18, 2007
    #5
  6. I have no idea why css can't have an selector algebra? Why not (li>a) +
    (ul -li div a)

    with - selecting the elements where the expression evaluates to true. I
    suppose it could be a drag on the system in some cases but it would be nice.

    So the above expression would select all list elements who has a list
    element above it with a link in it and who itself is of a child of a user
    list and contains a div which contains a link.

    This would allow one to get very specific selection but still retains
    backwards compatibility. I'm not sure about the complexity involved as there
    might be traversal issues but I'm sure it could be very useful.

    Jon
     
    Jon Slaughter, Apr 18, 2007
    #6
  7. Jon Slaughter

    Andy Dingley Guest

    On 18 Apr, 20:48, "Jon Slaughter" <> wrote:
    > I have no idea why css can't have an selector algebra?


    1. Because it just doesn't. Don't ask us, we're just the monkeys who
    use it. If you want it to have one, then you have to change the CSS
    recs (and browsers) rather than just writing pages in some new
    invented syntax.

    2. Because it doesn't need one. The level at which HTML works is
    supposed to be pretty dumb and close to the "end result" of a finished
    document. CSS is supposed to be (in the great architectural view)
    simple and efficient to implement, rather than powerful

    If you need a magic selector, stick it into the HTML (class / id etc.)
    and use trivial CSS to select it. If you need lots of these selectors,
    then generate them from some precursor format to HTML (which might
    also be HTML or XHTML) and get them into the final HTML document
    before the CSS ever sees it.


    If you care about this stuff, I strongly recommend that you read Hakon
    Lie's PhD thesis on the design of CSS and the precursor technologies
    that it was either based on, or deliberately rejected. What you
    describe has some commonality with DSSSL's approach. As we know how
    successful _that_ was, CSS deliberately avoided that route.
     
    Andy Dingley, Apr 19, 2007
    #7
  8. "Andy Dingley" <> wrote in message
    news:...
    > On 18 Apr, 20:48, "Jon Slaughter" <> wrote:
    >> I have no idea why css can't have an selector algebra?

    >
    > 1. Because it just doesn't. Don't ask us, we're just the monkeys who
    > use it. If you want it to have one, then you have to change the CSS
    > recs (and browsers) rather than just writing pages in some new
    > invented syntax.
    >


    um...

    > 2. Because it doesn't need one. The level at which HTML works is
    > supposed to be pretty dumb and close to the "end result" of a finished
    > document. CSS is supposed to be (in the great architectural view)
    > simple and efficient to implement, rather than powerful
    >


    um... you do realize that if its completely backwards compatible then it
    cannot hurt anything? You like being dumb just for fun? That is, if it lets
    css be dumb for those who want it but allow those who don't then it can't
    hurt.

    > If you need a magic selector, stick it into the HTML (class / id etc.)
    > and use trivial CSS to select it. If you need lots of these selectors,
    > then generate them from some precursor format to HTML (which might
    > also be HTML or XHTML) and get them into the final HTML document
    > before the CSS ever sees it.
    >
    >


    > If you care about this stuff, I strongly recommend that you read Hakon
    > Lie's PhD thesis on the design of CSS and the precursor technologies
    > that it was either based on, or deliberately rejected. What you
    > describe has some commonality with DSSSL's approach. As we know how
    > successful _that_ was, CSS deliberately avoided that route.
    >


    I just don't see whats wrong with it if its completely backwards compatible.
    There might be issues involved with it but you haven't pointed them out. It
    does offer many advantaged and clearer code. CSS might be for the dumb but
    if it can be transparently modifed to make it more powerful then there
    should be no reason not to. Its not a good idea to be dumb for its own
    sake.
     
    Jon Slaughter, Apr 20, 2007
    #8
  9. Jon Slaughter

    Ben C Guest

    On 2007-04-20, Jon Slaughter <> wrote:
    >
    > "Andy Dingley" <> wrote in message
    > news:...
    >> On 18 Apr, 20:48, "Jon Slaughter" <> wrote:
    >>> I have no idea why css can't have an selector algebra?

    [...]
    >> 2. Because it doesn't need one. The level at which HTML works is
    >> supposed to be pretty dumb and close to the "end result" of a finished
    >> document. CSS is supposed to be (in the great architectural view)
    >> simple and efficient to implement, rather than powerful
    >>

    > um... you do realize that if its completely backwards compatible then it
    > cannot hurt anything?


    I don't. Please explain that principle.

    > You like being dumb just for fun? That is, if it lets
    > css be dumb for those who want it but allow those who don't then it can't
    > hurt.


    What if users don't know if they're dumb or not or which features are
    the dumb ones they're supposed to stick to?

    The standards are already quite complicated enough.

    [...]
    >> If you care about this stuff, I strongly recommend that you read Hakon
    >> Lie's PhD thesis on the design of CSS and the precursor technologies
    >> that it was either based on, or deliberately rejected. What you
    >> describe has some commonality with DSSSL's approach. As we know how
    >> successful _that_ was, CSS deliberately avoided that route.
    >>

    >
    > I just don't see whats wrong with it if its completely backwards compatible.
    > There might be issues involved with it but you haven't pointed them out. It
    > does offer many advantaged and clearer code. CSS might be for the dumb but
    > if it can be transparently modifed to make it more powerful then there
    > should be no reason not to. Its not a good idea to be dumb for its own
    > sake.


    Some wise quotes from Dijkstra:

    Simplicity is prerequisite for reliability.

    The competent programmer is fully aware of the limited size of his own
    skull. He therefore approaches his task with full humility, and avoids
    clever tricks like the plague.

    How do we convince people that in programming simplicity and clarity --
    in short: what mathematicians call "elegance" -- are not a dispensable
    luxury, but a crucial matter that decides between success and failure
     
    Ben C, Apr 20, 2007
    #9
  10. Jon Slaughter

    Andy Dingley Guest

    On 20 Apr, 04:05, "Jon Slaughter" <> wrote:

    > You like being dumb just for fun?


    Simple doesn't mean dumb.

    'Tis a gift to be simple.



    > > If you care about this stuff, I strongly recommend that you read Hakon
    > > Lie's PhD thesis on the design of CSS and the precursor technologies
    > > that it was either based on, or deliberately rejected.


    > I just don't see whats wrong with it if its completely backwards compatible.


    Then read what I told you to read.
     
    Andy Dingley, Apr 20, 2007
    #10
  11. Jon Slaughter

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > Some wise quotes from Dijkstra:
    >
    > Simplicity is prerequisite for reliability.
    >
    > The competent programmer is fully aware of the limited size of his own
    > skull. He therefore approaches his task with full humility, and avoids
    > clever tricks like the plague.
    >
    > How do we convince people that in programming simplicity and clarity --
    > in short: what mathematicians call "elegance" -- are not a dispensable
    > luxury, but a crucial matter that decides between success and failure


    Wise indeed. Funny how they are so easily ignored, not only in
    programming, but in many other earthly endeavours.

    --
    dorayme
     
    dorayme, Apr 21, 2007
    #11
  12. Jon Slaughter

    mbstevens Guest

    On Sat, 21 Apr 2007 10:31:33 +1000, dorayme wrote:

    > In article <>,
    > Ben C <> wrote:
    >
    >> Some wise quotes from Dijkstra:
    >>
    >> Simplicity is prerequisite for reliability.
    >>
    >> The competent programmer is fully aware of the limited size of his own
    >> skull. He therefore approaches his task with full humility, and avoids
    >> clever tricks like the plague.
    >>
    >> How do we convince people that in programming simplicity and clarity --
    >> in short: what mathematicians call "elegance" -- are not a dispensable
    >> luxury, but a crucial matter that decides between success and failure

    >
    > Wise indeed. Funny how they are so easily ignored, not only in
    > programming, but in many other earthly endeavours.


    ....and let's not forget C.A.R. Hoare's important dictum that inside every
    large program there is a small program trying to get out.

    Other goodies here:
    http://www.adrianmccarthy.com/blog/?p=15
     
    mbstevens, Apr 21, 2007
    #12
  13. Jon Slaughter

    dorayme Guest

    In article <>,
    mbstevens <> wrote:

    > On Sat, 21 Apr 2007 10:31:33 +1000, dorayme wrote:
    >
    > > In article <>,
    > > Ben C <> wrote:
    > >
    > >> Some wise quotes from Dijkstra:
    > >>
    > >> Simplicity is prerequisite for reliability.
    > >>
    > >> The competent programmer is fully aware of the limited size of his own
    > >> skull. He therefore approaches his task with full humility, and avoids
    > >> clever tricks like the plague.
    > >>
    > >> How do we convince people that in programming simplicity and clarity --
    > >> in short: what mathematicians call "elegance" -- are not a dispensable
    > >> luxury, but a crucial matter that decides between success and failure

    > >
    > > Wise indeed. Funny how they are so easily ignored, not only in
    > > programming, but in many other earthly endeavours.

    >
    > ...and let's not forget C.A.R. Hoare's important dictum that inside every
    > large program there is a small program trying to get out.
    >


    Good one! It is also similar to what I think of any films over 90
    min long that are not complete rubbish.



    > Other goodies here:
    > http://www.adrianmccarthy.com/blog/?p=15


    --
    dorayme
     
    dorayme, Apr 21, 2007
    #13
  14. Jon Slaughter

    Ben C Guest

    On 2007-04-21, dorayme <> wrote:
    > In article <>,
    > Ben C <> wrote:
    >
    >> Some wise quotes from Dijkstra:
    >>
    >> Simplicity is prerequisite for reliability.
    >>
    >> The competent programmer is fully aware of the limited size of his own
    >> skull. He therefore approaches his task with full humility, and avoids
    >> clever tricks like the plague.
    >>
    >> How do we convince people that in programming simplicity and clarity --
    >> in short: what mathematicians call "elegance" -- are not a dispensable
    >> luxury, but a crucial matter that decides between success and failure

    >
    > Wise indeed. Funny how they are so easily ignored, not only in
    > programming, but in many other earthly endeavours.


    The thing is it's harder than it looks to keep things simple. But people
    don't always even realize that that's what they should be trying to do.
     
    Ben C, Apr 21, 2007
    #14
    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:
    386
    David Dorward
    Jul 13, 2003
  2. Derek Clarkson
    Replies:
    3
    Views:
    381
    Derek Clarkson
    Nov 7, 2003
  3. Nik Coughin

    css - descendant selectors

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

    Question about CSS selectors

    Jeanne D, Oct 15, 2005, in forum: HTML
    Replies:
    8
    Views:
    382
    Jeanne D
    Oct 16, 2005
  5. Nathan Sokalski

    Help With CSS Selectors

    Nathan Sokalski, Mar 24, 2008, in forum: ASP .Net
    Replies:
    5
    Views:
    346
    Just Me
    Mar 24, 2008
Loading...

Share This Page