Results 1 to 5 of 5

Thread: parent / siblings

  1. #1
    Join Date
    Jun 2011
    Location
    Pearl of the East
    Posts
    54
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Default parent / siblings

    good day guys,


    how can i do this with css? i want to design all elements which has a sibling?

    ex.

    Code:
    <ul>
    	<li><a href="#">element</a>
        	<ul>
            	<li><a href="#">element</a></li>
            </ul>
        </li>
        <li><a href="#">element</a></li>
    </ul>
    what i want to do is, if <a> within an <li> has a sibling (which is <ul>), i want to add style on it,.


    thanks in advance
    more power!
    Last edited by regicidedelferoz; 03-13-2012 at 12:38 AM. Reason: resolved

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    If I understand the question correctly you cannot, at least not that I know of.

    Let's make sure I got the question right though:

    You want to style an a tag based upon whether or not it has a sibling ul after it, right?

    The closest I'm aware of is the adjacent selector. However, it only works if the element to be styled follows the sibling, not precedes it. So this works:

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    li ul + a {
    	color: red;
    }
    </style>
    </head>
    <body>
    <ul>
    	<li>
        	<ul>
            	<li><a href="#">element</a></li>
            </ul>
    	<a href="#">an a tag that's an adjacent following sibling of a ul, within an li - I'm Red!</a>
        </li>
        <li><a href="#">element</a></li>
    </ul>
    </body>
    </html>
    But there's nothing for the other way around.

    A general rule of thumb in css selectors is that (in the DOM) they can look above the element to be styled and use that as a basis for selection, but not below.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2011
    Location
    Pearl of the East
    Posts
    54
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Default

    its working sir,. thanks you,.

    but its not working with my code:

    Code:
    #mj_menu {border:1px solid #000; padding:1em; width:200px; background:#fff;}
    #mj_menu li {list-style:none;}
    #mj_menu li a {display:block; height:30px; border-bottom:1px dotted #000; line-height:1.9em; text-indent:1em; text-decoration:none; text-transform:capitalize; color:#333;}
    #mj_menu li a:hover, #mj_menu .active {color:#333; background:#ddd;}
    #mj_menu li ul {position:absolute; margin-left:12em; margin-top:-2.1em; border:1px solid #000; padding:1em; width:200px; background:#fff;}
    #mj_menu li ul + a {background:#00F !important;}
    #mj_menu .displayNone {display:none;}

    Code:
    <ul id="mj_menu">
        <li><a href="#">menu 1</a>
            <ul class="displayNone">
                <li><a href="#">menu 1.1</a>
                    <ul class="displayNone">
                        <li><a href="#">menu 1.1.1</a>
                            <ul class="displayNone">
                                <li><a href="#">menu 1.1.1.1</a>
                                    <ul class="displayNone">
                                        <li><a href="#">1.1.1.1.1</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">menu 1.1.1.2</a>
                                    <ul class="displayNone">
                                        <li><a href="#">1.1.1.2.1</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">menu 1.1.2</a>
                            <ul class="displayNone">
                                <li><a href="#">menu 1.1.2.1</a>
                                    <ul class="displayNone">
                                        <li><a href="#">1.1.2.1.1</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">menu 1.1.2.2</a>
                                    <ul class="displayNone">
                                        <li><a href="#">1.1.2.2.1</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">menu 1.1.3</a>
                            <ul class="displayNone">
                                <li><a href="#">menu 1.1.3.1</a></li>
                                <li><a href="#">menu 1.1.3.2</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">menu 1.2</a>
                    <ul class="displayNone">
                        <li><a href="#">menu 1.2.1</a></li>
                        <li><a href="#">menu 1.2.2</a></li>
                        <li><a href="#">menu 1.2.3</a></li>
                    </ul>
                </li>
                <li><a href="#">menu 1.3</a>
                    <ul class="displayNone">
                        <li><a href="#">menu 1.3.1</a></li>
                        <li><a href="#">menu 1.3.2</a></li>
                        <li><a href="#">menu 1.3.3</a></li>
                    </ul>
                </li>
                <li><a href="#">menu 1.4</a>
                    <ul class="displayNone">
                        <li><a href="#">menu 1.4.1</a></li>
                        <li><a href="#">menu 1.4.2</a></li>
                        <li><a href="#">menu 1.4.3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">menu 2</a>
            <ul class="displayNone">
                <li><a href="#">menu 2.1</a></li>
                <li><a href="#">menu 2.2</a></li>
                <li><a href="#">menu 2.3</a></li>
                <li><a href="#">menu 2.4</a></li>
            </ul>
        </li>
        <li><a href="#">menu 3</a>
            <ul class="displayNone">
                <li><a href="#">menu 3.1</a></li>
                <li><a href="#">menu 3.2</a></li>
                <li><a href="#">menu 3.3</a></li>
                <li><a href="#">menu 3.4</a></li>
            </ul>
        </li>
        <li><a href="#">menu 4</a>
            <ul class="displayNone">
                <li><a href="#">menu 4.1</a></li>
                <li><a href="#">menu 4.2</a></li>
                <li><a href="#">menu 4.3</a></li>
                <li><a href="#">menu 4.4</a></li>
            </ul>
        </li>
        <li><a href="#">menu 5</a>
            <ul class="displayNone">
                <li><a href="#">menu 5.1</a></li>
                <li><a href="#">menu 5.2</a></li>
                <li><a href="#">menu 5.3</a></li>
                <li><a href="#">menu 5.4</a></li>
            </ul>
        </li>
    </ul>

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The a tag must follow the ul tag. There's no 'look behind' in css.

    I guess I wasn't clear. You cannot do this with css and your markup because it only works if the ul comes before the a.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jun 2011
    Location
    Pearl of the East
    Posts
    54
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Default

    its now working fine sir,. thank you very much

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •