Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

basic css 2

Status
Not open for further replies.

spicymango

Programmer
May 25, 2008
119
CA
Hi,

I need help understanding this basic CSS code.

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

Code:
.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?
 
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:

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


For the second one:

Code:
[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:

Code:
<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.
 
And if vacunita is not around to give you detailed answers, there's always selectoracle. Check out the explanations:
SelectORacle said:
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]
 
Thanks a lot for your replies. Its # 2 that i am still not sure.

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;
        }


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

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

 	</div>
</div>
 
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.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top