Solved

Targeting Menu Elements without Class or IDs

Posted on 2010-11-10
5
424 Views
Last Modified: 2012-05-10
Greetings,

Attached is the markup for a menu bar.  I want to target the a element of Main Item 6 with a style so I can affect it's right margin.  Here's what I thought would work:

ul ul ul ul li li li a

{

margin-right: -2px;

}

Unfortunately, it didn't work.  Question: where am I going wrong?  How would target that particular element without using any class or id hook, just vanilla xhtml?
<ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">Main Item 1</a>
    <ul>
        <li><a href="#">Sub Item 1</a></li>
        <li><a href="#">Sub Item 2</a></li>
        <li><a href="#">Sub Item 3</a></li>
      </ul>
    </li>
    <li><a href="#">Main Item 2</a>
    <ul>
    	<li><a href="#">Sub Item 4</a></li>
    	<li><a href="#">Sub Item 5</a></li>
    	<li><a href="#">Sub Item 6</a></li>
    	<li><a href="#">Sub Item 7</a></li>
     </ul>
    </li>
    <li><a href="#">Main Item 3</a></li>
    <li><a href="#">Main Item 4</a></li>
    <li><a href="#">Main Item 5</a>
    <ul id="life">
        <li><a href="#">Sub Item 8</a></li>
        <li><a href="#">Sub Item 9</a></li>
      </ul>
    </li>
    <li><a href="#">Main Item 6</a>
      <ul>
            <li><a href="#">Sub Item 10</a></li>
            <li><a href="#">Sub Item 11</a></li>
      </ul>
    </li> 
  </ul>

Open in new window

0
Comment
Question by:max7
5 Comments
 
LVL 7

Expert Comment

by:wdfdo1986
ID: 34109126
do u want to set this to only a particular href link?
0
 
LVL 22

Accepted Solution

by:
remorina earned 350 total points
ID: 34109189
You can use pseudo element last-child, but unfortunately yhe last-child would not work with Internet Explorer up to version 8 since it was not supported until version 9 beta.

If I understand correctly you seem to want to eliminate a right margin for the last menu item, alternatively you can change your margins to left instead of right or use padding instead if you're concerned of of the double margin issue in case your elements were left floated then use the first-child instead which would work well in all modern browsers (not supported by IE6 and older browsers)

Finally, since the way these selectors work, they will apply the style to each first or last element of a UL resulting in the style being applied to several instances, so you would have to reset the styles back for others sub elements.

It might seem complex to explain but the example below should give you a better idea of how this can be achieved, and I've also added some explanation comments for the CSS.

Hope this helps
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example</title>
    <style>
        /* Apply style to each last child (li) of any ul element, this would apply to all last <li> elements */
        ul li:first-child a {background:orange;} 
        /* reset back the sub elements of other items and the sub items of the last one*/
        ul li:first-child li a, ul li li:first-child a  {background:none;} 
    </style>
</head>
<body>
    <ul>
        <li><a href="#">Home</a> </li>
        <li><a href="#">Main Item 1</a>
            <ul>
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
            </ul>
        </li>
        <li><a href="#">Main Item 2</a>
            <ul>
                <li><a href="#">Sub Item 4</a></li>
                <li><a href="#">Sub Item 5</a></li>
                <li><a href="#">Sub Item 6</a></li>
                <li><a href="#">Sub Item 7</a></li>
            </ul>
        </li>
        <li><a href="#">Main Item 3</a></li>
        <li><a href="#">Main Item 4</a></li>
        <li><a href="#">Main Item 5</a>
            <ul id="life">
                <li><a href="#">Sub Item 8</a></li>
                <li><a href="#">Sub Item 9</a></li>
            </ul>
        </li>
        <li><a href="#">Main Item 6</a>
            <ul>
                <li><a href="#">Sub Item 10</a></li>
                <li><a href="#">Sub Item 11</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

Open in new window

0
 
LVL 3

Assisted Solution

by:vimalraja
vimalraja earned 150 total points
ID: 34109230
Hi, I have figured out two ways  to fulfill you requirement.  Please have a try and let me know what you think.
First Method:
(a) To select the 6'th list item.
ul li+li+li+li+li+li+li
        {
              margin-right:-2px;
        }
(a) To Select the anchor tag (<a>) of the 6'th Item
ul li+li+li+li+li+li+li ul li a
        {
              margin-right:-2px;
        }

Second Method:
(a.1) By Selecting the last child of the ul.
ul li:last-child
        {
              margin-right:-2px;
        }
(a.2)Reset the li style of the sub ul li:lastchild
ul li ul li:last-child
        {
              margin-right:0px;
        }
(b) To Select the anchor tag (<a>) of the 6'th Item
ul li:last-child a
        {
              margin-right:-2px;
        }
(b) Reset the anchor tag (<a>) of the sub ul li:lastchild
ul li ul li:last-child a
        {
              margin-right:0;
        }
0
 
LVL 1

Author Comment

by:max7
ID: 34109320
I greatly appreciate the responses; I will get back to you some time tomorrow after I've had time to work with them and see what happens.
0
 
LVL 1

Author Closing Comment

by:max7
ID: 34124546
Remorina's solution worked without trouble ... although I didn't mention this in my original posting, I also have a secondary menu bar in the footer of this website.  When I instituted your styles it removed the right border of the first list item (in IE 7&8) in this secondary menu ... I used the right borders on these elements as a separator.  I could not find a way to fix and limit this style from being applied only to the main menu.  

But I believe that is another question ...
0

Featured Post

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to get bootstrap element to collapse at wider screen width 3 41
Wordpress Security 29 49
Output to HTML in powershell 3 26
Powershell script does not exit 4 29
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question