Small css doubt

HTML & CSS
1

Hai folks,

what this mean?


.list_wrapper table th, tr, td {
}

:rolleyes:

2

In CSS you can specify styles that apply to hierarchical elements.
The style attributes that are included (between the {}) would apply to ANY td, ANY tr, and ALL th that are INSIDE a table which is a descendant of ANY element with the “CLASS” attribute of ‘list_wrapper’

Here is a Sitepoint Reference that explains this well.

3

Thanks for the quick reply.

4 
.list_wrapper{
    background: none repeat scroll 0 0 #1E9ED7;
    border: 2px solid #FFFFFF;
	-moz-border-radius:8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
    padding: 4px;
}

.list_wrapper table{
     border-collapse: collapse;
	 margin:20px;
	 font-family:Verdana, Arial, Helvetica, sans-serif;
	 font-size:12px;
	 text-align:center;
}
.list_wrapper table th, tr, td {
    border: 1px solid #BDBDBD;
    color: #fff;
    height: 10px;
    padding: 4px 8px;
}
.list_wrapper table th{
    background: #699B20;
}
.list_wrapper table td{
  background:#FFFFCD;
  color:#000000;
}

now i have a problem. table styles defined above also get applied to other tables / not within elements having .list_wrapper classname :rolleyes:

specially the border, font etc. :rolleyes::rolleyes:

5

Hello i just defined the style as follows and now the problem solved.


.list_wrapper table th,.list_wrapper table tr,.list_wrapper table td {
    border: 1px solid #BDBDBD;
    color: #fff;
    height: 10px;
    padding: 4px 8px;
}
6

Great work.

The lessons best learned are those that come from our self-discovery!!

7

Yes a comma separated list of values is just that - a separate list of values. The selectors between the commas have nothing to do with what comes before or after the comma and are just separate rules that will all get the same styles applied.

Don’t worry a lot of people initially make that same mistake :slight_smile: