5 replies [Last post]
Canadian-gal
Canadian-gal's picture
Offline
newbie
Last seen: 6 years 34 weeks ago
Timezone: GMT-6
Joined: 2013-01-18
Posts: 7
Points: 10

If I name a class Maindoc Ul and make the font bold, blue, and 12 point does this mean that all Uls in my document will also have the same constraints? Or only when I call the class Maindoc? In other words, does a class with two names really mean that it will apply to two different items? In this example: Class Maindoc and all Uls? or does it mean that my class name is Maindoc Ul?

Thank you

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

hi Canadian-gal<p

hi Canadian-gal
<p class="Maindoc Ul">
is specifying 2 class names Maindoc and Ul

in a stylesheet if you have:

.Maindoc Ul{

it would be looking for an HTML element of type Ul within an element with a class of Maindoc

See Descendant selector

Canadian-gal
Canadian-gal's picture
Offline
newbie
Last seen: 6 years 34 weeks ago
Timezone: GMT-6
Joined: 2013-01-18
Posts: 7
Points: 10

So in this css, would my Ul

So in this css, would my Ul list have a conflict or would it read that make all Ul square except within the context of .MainDoc and then make it none.

Ul
{list-style-type: square;}

.MainDoc Ul
{
display: inline;
list-style-type: none;
padding: 0.25em;
margin: 0.25em 0;
background: #B8944D;
}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi Canadian-gal, Quote: make

Hi Canadian-gal,

Quote:

make all Ul square except within the context of .MainDoc and then make it none.

It would be simple to try it out for yourself.

Canadian-gal
Canadian-gal's picture
Offline
newbie
Last seen: 6 years 34 weeks ago
Timezone: GMT-6
Joined: 2013-01-18
Posts: 7
Points: 10

Thank you for the

Thank you for the clarification. I did try it and it didn't work for me. Perhaps you can instruct on what I am doing wrong?

ul {
list-style-type: square;
}

#maindoc ul {
display: inline;
list-style-type: none;
padding: 0.25em;
margin: 0.25em 0;
background: #B8944D;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="lists" />
</head>
<body>
<ul>
<li>box</li>
<li>cow</li>
<li>dog</li>
<li>cat</li>
</ul>
<ul class="maindoc">
<li>box</li>
<li>cow</li>
<li>dog</li>
<li>cat</li>
</ul>
</body>
</html>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

In that case you need to

In that case you need to use:

 UL.maindoc{
display: inline;
list-style-type: none;
padding: 0.25em;
margin: 0.25em 0;
background: #B8944D;
}

or just
.maindoc{
display: inline;
list-style-type: none;
padding: 0.25em;
margin: 0.25em 0;
background: #B8944D;
}

# is used to specify an ID not a class.