css tag conflection

njgroup
njgroup used Ask the Experts™
on
hi,

in my css document, I have some style for all tags ul, but, I wanna set some specific style for specific ul and there li tags

so how to set id to ul and use that id for inner li tags and a tags, img tags, divs, and so on

here is the css document and the relevant html:
html part:

  <div id="gallery">
	
    <div id="slides_main">
    
    <div class="slide_main"><div style="width:1000px; height:300px; background:url(images/sample_slides/main_slides.jpg) no-repeat 0px 0px; display: block;margin-left: auto;margin-right: auto;"></div></div>
    <div class="slide_main"><div style="width:1000px; height:300px; background:url(images/sample_slides/main_slides.jpg) no-repeat 0px -300px; display: block;margin-left: auto;margin-right: auto;"></div></div>
    <div class="slide_main"><div style="width:1000px; height:300px; background:url(images/sample_slides/main_slides.jpg) no-repeat 0px -600px; display: block;margin-left: auto;margin-right: auto;"></div></div>
    <div class="slide_main"><div style="width:1000px; height:300px; background:url(images/sample_slides/main_slides.jpg) no-repeat 0px -900px; display: block;margin-left: auto;margin-right: auto;"></div></div>
	<div class="slide_main"><div style="width:1000px; height:300px; background:url(images/sample_slides/main_slides.jpg) no-repeat 0px -1200px; display: block;margin-left: auto;margin-right: auto;"></div></div>
      
    </div>
    
    <div id="menu_slider">
    
    <ul>
        <li class="fbar">&nbsp;</li>
		<li class="menuItem_main"><a href=""><div style="width:32px; height:32px; background:url(images/sample_slides/main_slide_thumbs.png) no-repeat 0px 0px; display: block;margin-left: auto;margin-right: auto;"></div></a></li>
		<li class="menuItem_main"><a href=""><div style="width:32px; height:32px; background:url(images/sample_slides/main_slide_thumbs.png) no-repeat 0px -32px; display: block;margin-left: auto;margin-right: auto;"></div></a></li>
		<li class="menuItem_main"><a href=""><div style="width:32px; height:32px; background:url(images/sample_slides/main_slide_thumbs.png) no-repeat 0px -64px; display: block;margin-left: auto;margin-right: auto;"></div></a></li>
		<li class="menuItem_main"><a href=""><div style="width:32px; height:32px; background:url(images/sample_slides/main_slide_thumbs.png) no-repeat 0px -90px; display: block;margin-left: auto;margin-right: auto;"></div></a></li>
		<li class="menuItem_main"><a href=""><div style="width:32px; height:32px; background:url(images/sample_slides/main_slide_thumbs.png) no-repeat 0px -128px; display: block;margin-left: auto;margin-right: auto;"></div></a></li>
    </ul>
    
    
    </div>
    
  </div>

------------------------------------
css:


/* Gallery styles */

#gallery{
	/* CSS3 Box Shadow */
	-moz-box-shadow:0 0 3px #AAAAAA;
	-webkit-box-shadow:0 0 3px #AAAAAA;
	box-shadow:0 0 3px #AAAAAA;
	
	/* CSS3 Rounded Corners */
	
	-moz-border-radius-bottomleft:4px;
	-webkit-border-bottom-left-radius:4px;
	border-bottom-left-radius:4px;
	
	-moz-border-radius-bottomright:4px;
	-webkit-border-bottom-right-radius:4px;
	border-bottom-right-radius:4px;
	
	border:1px solid white;
	
	background:url(../images/panel.jpg) repeat-x bottom center #ffffff;
	
	/* The width of the gallery */
	width:1000px;
	overflow:hidden;
}

#slides_main{
	/* This is the slide area */
	height:300px;
	
	/* jQuery changes the width later on to the sum of the widths of all the slides. */
	width:1000px;
	overflow:hidden;
}

.slide_main{
	float:left;
}

#menu_slider{
	/* This is the container for the thumbnails */
	height:45px;
}

ul{
	margin:0px;
	padding:0px;
}

li{
	/* Every thumbnail is a li element */
	width:60px;
	display:inline-block;
	list-style:none;
	height:45px;
	overflow:hidden;
}

li.inact:hover{
	/* The inactive state, highlighted on mouse over */
	background:url(../images/pic_bg.png) repeat;
}

li.act,li.act:hover{
	/* The active state of the thumb */
	background:url(../images/active_bg.png) no-repeat;
}

li.act a{
	cursor:default;
}

.fbar{
	/* The left-most vertical bar, next to the first thumbnail */
	width:2px;
	background:url(../images/divider.png) no-repeat right;
}

li a{
	display:block;
	background:url(../images/divider.png) no-repeat right;
	height:35px;
	padding-top:10px;
}

a img{
	border:none;
}


/* The styles below are only necessary for the demo page */


a, a:visited {
	color:#0196e3;
	text-decoration:none;
	outline:none;
}

a:hover{
	text-decoration:underline;
}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2007
Commented:
CSS allows for inheritance and cascading.

Never give global styles to all elements of a particular type, unless that is what you're design needs. Which would be extremely rare.

Use classes for repeating patterns, and IDs for unique elements. Use these in your CSS to reference those elements.

eg.

HTML:

  <ul class="my-list">
        <li class="fbar">&nbsp;</li>
		<li class="menuItem_main"><a href=""><div style="width:32px; height:32px; background:url(images/sample_slides/main_slide_thumbs.png) no-repeat 0px 0px; display: block;margin-left: auto;margin-right: auto;"></div></a></li>
		<li class="menuItem_main"><a href=""><div style="width:32px; height:32px; background:url(images/sample_slides/main_slide_thumbs.png) no-repeat 0px -32px; display: block;margin-left: auto;margin-right: auto;"></div></a></li>
		<li class="menuItem_main"><a href=""><div style="width:32px; height:32px; background:url(images/sample_slides/main_slide_thumbs.png) no-repeat 0px -64px; display: block;margin-left: auto;margin-right: auto;"></div></a></li>
		<li class="menuItem_main"><a href=""><div style="width:32px; height:32px; background:url(images/sample_slides/main_slide_thumbs.png) no-repeat 0px -90px; display: block;margin-left: auto;margin-right: auto;"></div></a></li>
		<li class="menuItem_main"><a href=""><div style="width:32px; height:32px; background:url(images/sample_slides/main_slide_thumbs.png) no-repeat 0px -128px; display: block;margin-left: auto;margin-right: auto;"></div></a></li>
    </ul>


CSS:

ul { /* applies to all uls */ }
ul.my-list { /* applies to any ul with the class my-list */ }
ul.my-list li { /* applies to all li's inside any ul with the class my-list */ }
ul.my-list li div { /* applies to divs inside all li's inside any ul with the class my-list */ }
ul.my-list div { /* same as above */ }

Open in new window

Author

Commented:
thank you, that helps

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial