1 reply [Last post]
itechieguy.com
Offline
newbie
Last seen: 10 years 29 weeks ago
Timezone: GMT-8
Joined: 2012-02-13
Posts: 6
Points: 11

I am working with a Wordpress stylesheet. By the time is gets to me, ul and li have defined with an arrow bullet. For one list I don't want that graphic bullet, and I don't want the indent. this a sample is made to reduplicate the problem.

The following code does what I want to.

<head>
 
<style type="text/css">
 
/* this is how ul li is defined when it gets to me */	
/* Note to get full affect of code, you will need to create an arrow_next.gif */
ul li{	
	list-style-type: none; /* many other types */
	background: url('arrow_next.gif');
	background-repeat: no-repeat;
	padding-left: 14px; 
	background-position: 0px 5px; 
 
} 
 
 ul.list-square{
	background:none; 
	list-style-type:square;
	list-style-position:inside;
	padding:0;
	margin:0;
}
 
li.list-square{
	background:none; 
	list-style-type:square;
	list-style-position:inside;
	padding:0;
	margin:0;
}
 
</style>
<head>
 
<body>
This is a sample of the default ul li
<ul>
	<li> this is item 1</li>
	<li> this is item 2</li>
</ul>
 
this is my redefine ul li
<ul class="list-square">
	<li class="list-square"> this is item 3</li>
	<li class="list-square"> this is item 4</li>
</ul>
 
</body>

When I try to combine the ul, li selectors, like below, I loss the indent.

ul.list-square li.list-square{
	background:none; 
	list-style-type:square;
	list-style-position:inside;
	padding:0;
	margin:0;
}

Can someone explain why to this newbie or tell me what I did wrong?
Tried with Safari and Firefox.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

What you are targeting is

What you are targeting is just the LI. If you want to override the styles for the UL as well you need to put a comma between the selectors.

ul.list-square, li.list-square{