basic css 2

[spicymango]

Hi,

I need help understanding this basic CSS code.

.var_planning.two-column .right-column {
	float:left;
	margin-left:20px;
	margin-top:0;
	width:513px;
	}	
	
	.var_planning.two-column .right-column.fullwidth {
		width:750px;
		}

In the above I believe .var_planning.two-column and .right-column.fullwidth are classes and should be used like

<p class="var_planning.two-column"> or <p class="right-column.fullwidth"> in the HTML



this one more confusing

.var_planning ul.ul-list {
		margin:10px 0 10px 0;
		}
		
		.var_planning ul.ul-list li {
			list-style:disc outside none;
			margin:0 0 8px 14px;
			}

My understanding is here
.var_planning is a class
.ul.ul-list is a class, correct?

and if I declare <p class=ul.ul-list>
<li>one</li>
<li>two</li>
</p>

OR
<p class=var_planning >
<li>one</li>
<li>two</li>
</p>


then all the styles will apply to li, right?

 

[vacunita]

In the above I believe .var_planning.two-column and .right-column.fullwidth are classes and should be used like

<p class="var_planning.two-column"> or <p class="right-column.fullwidth"> in the HTML

Almost. They are classes, but basically what its saying is apply the following CSS to an element with a class of right-column that exists inside an element that has the classes var_planning and two-column applied to it. It should look something like this:

<div class="[b][green]var_planning two-column[/green][/b]">
  <div class="[blue]right-column[/blue]">...</div>
</div>

For the second one:

[green].var_planning[/green] [blue]ul[/blue].[green]ul-list[/green] {
        margin:10px 0 10px 0;
        }
        
        [green].var_planning[/green] [blue]ul[/blue].[green]ul-list[/green] [blue]li[/blue] {
            list-style:disc outside none;
            margin:0 0 8px 14px;
            }

Te green sections are classes, the blue ones are elements.

So this:

.var_planning ul.ul-list

Applies to an unordered list element with a class of ul-list that exists inside an element with a class of var-planning.

And this:
.var_planning ul.ul-list li

Applies to the list items or <li> elements inside the previous unordered list.

so the HTML would be:

<div class="var_planning">
<ul class="ul-list">
<li>...</li>
...
</ul>

</div>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[Vragabond]

And if vacunita is not around to give you detailed answers, there's always selectoracle. Check out the explanations:

Selector 1: *.var_planning.two-column *.right-column

Selects any element with a class attribute that contains the word right-column that is a descendant of any element with a class attribute that contains the word var_planning and a class attribute that contains the word two-column.

Selector 2: *.var_planning.two-column *.right-column.fullwidth

Selects any element with a class attribute that contains the word right-column and a class attribute that contains the word fullwidth that is a descendant of any element with a class attribute that contains the word var_planning and a class attribute that contains the word two-column.

Selector 3: *.var_planning ul.ul-list

Selects any ul element with a class attribute that contains the word ul-list that is a descendant of any element with a class attribute that contains the word var_planning.

Selector 4: *.var_planning ul.ul-list li

Selects any li element that is a descendant of an ul element with a class attribute that contains the word ul-list that is a descendant of any element with a class attribute that contains the word var_planning.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[spicymango]

Thanks a lot for your replies. Its # 2 that i am still not sure.

.var_planning.two-column .right-column {
    float:left;
    margin-left:20px;
    margin-top:0;
    width:513px;
    }    
    
    .var_planning.two-column .right-column.fullwidth {
        width:750px;
        }

I think #2 will be used like the following, please correct me if i am wrong

<div class="var_planning two-column ">
	<div class = "right-column fullwidth">
            <p> ............
            </p>

 	</div>
</div>

 

[vacunita]

Yup, that's correct.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/