Forums

attilahajzer

Is it possible to have a Pseudo Element and Selector in the same css tag?


/*DROPDOWN*/

#header #navigation{height:40px; margin-top:-33px;padding:10px 10px 15px 10px; border-radius:8px; background-color:#FFF; }
/* 
	LEVEL ONE
*/
ul.dropdown                         { position: relative;bottom:3px;}
ul.dropdown li                      { font-weight: normal; float: left; zoom: 1; background: #fff; }
ul.dropdown a:hover		            { color: #000; }
ul.dropdown a:active                { color: #FFF; }
ul.dropdown li a                    { display: block; padding: 7px 18px; border-right: 1px solid #CCC;
	 								  color: #222; }
ul.dropdown li a:hover :first-child  { border-radius:8px; } /* Doesn't work in IE */

ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */

ul.dropdown li.hover,
ul.dropdown li:hover                { background: #9ACD32; color: black; position: relative; } /*F3D673*/
ul.dropdown li.hover a              { color: black; }


/* 
	LEVEL TWO
*/
ul.dropdown ul 						{ width: 200px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li 					{ font-weight: normal; background: #333333; color: #FFF; 
									  border-bottom: 1px solid #666; float: none; }
									  
                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a					{ border-right: none; width: 100%; display: inline-block; color:#FFF;} 

/* 
	LEVEL THREE
*/
ul.dropdown ul ul 					{ left: 100%; top: 0; }
ul.dropdown li:hover > ul 			{ visibility: visible; }

something like that?

attilahajzer

Got it with

ul.dropdown li:first-child,
ul.dropdown li a:hover{ border-radius:6px 0 0 0; } /* Doesn't work in IE */

ul.dropdown li:last-child,
ul.dropdown li a:hover{ border-radius:0 6px 0 0; } /* Doesn't work in IE */

But it also applies it to the first and Last of each drop down (level) list as well. trying to fix that now.

attilahajzer

http://twitpic.com/7kivlg/full

look at the windows link. (the corner) the top right corner is rounded.

same goes with the first top left corner of the dropdown for each level.

I only want the top left of home and top right of contact corners to be rounded. ive tried giving them seperate selectors but again, it wasn't working?

kgscott284

in other words, you dont want them to be rounded in your sub navigation? I'm not sure i completely understand but if that is the case try this:


/*targets all li and a tags within the dropdown */
ul.dropdown li:first-child,
ul.dropdown li a:hover{ border-radius:6px 0 0 0; } /* Doesn't work in IE */

/*targets all li and a tags within the dropdown */
ul.dropdown li:last-child,
ul.dropdown li a:hover{ border-radius:0 6px 0 0; } /* Doesn't work in IE */

/*targets only 2nd level*/
   ul.dropdown ul li:first-child,
   ul.dropdown ul li a:hover{ border-radius: none; } 

/*targets only 2nd level*/
   ul.dropdown ul li:last-child,
   ul.dropdown ul li a:hover{ border-radius: none; } 

/*targets only 3rd level*/
   ul.dropdown ul ul li:first-child,
   ul.dropdown ul ul li a:hover{ border-radius: none; } 

/*targets only 3rd level*/
   ul.dropdown ul ul li:last-child,
   ul.dropdown ul ul li a:hover{ border-radius: none; }

You can obviously shorten it by using commas since the same rules apply for both 2nd and 3rd level first and last children...but this way you see what i hope is the proper way to select each level...I can;t see the HTML structure, so i am just making an educated guess...

attilahajzer

here's the HTML.

<div id="navigation">
			<ul class="dropdown">
			<li><a href="#" id="home">Home</a></li>
			<li><a href="#">Consoles &rsaquo;</a>
				<ul class="sub-menu">
					<li><a href="#">Xbox 360</a></li>
					<li><a href="#">PS3</a></li>
					<li><a href="#">Wii</a></li>
					<li><a href="#">Computer &rsaquo;</a>
						<ul>
							<li><a href="#">Linux</a></li>
							<li><a href="#">Mac</a></li>
							<li><a href="#">Windows</a></li>
						</ul>
					</li>
				</ul>
			</li>
					
			<li><a href="">Handheld &rsaquo;</a>
				<ul class="sub-menu">
					<li><a href="#">iPhone</a></li>
					<li><a href="#">iPad</a></li>
					<li><a href="#">PSP</a></li>
					<li><a href="#">Nintendo DS</a></li>
				</ul>
			</li>
					
					
			<li><a href="#">Games &rsaquo;</a>
				<ul class="sub-menu">
					<li><a href="">First Person Shooter</a></li>
					<li><a href="">Role Playing Games</a></li>
					<li><a href="">War</a></li>
					<li><a href="">Simulation</a></li>
				</ul>
			</li>
			<li><a href="#">Videos</a></li>
			<li><a href="#">Screenshots</a></li>
			<li><a href="#">Soundtracks</a></li>
			<li><a href="#">Greatest Memories</a></li>
			<li><a href="#" id="about">About</a></li>
		</ul>
	</div><!-- navigation -->

its no different then what I had before for some reason.

treehouse : what would you like to learn today?

Forums

Pseudo Element AND Selector.