Calling Nested Elements In CSS
So we have talked about using id’s and classes, now that you have that basis we can dive deeper into the rabbit hole. Say you are creating a table and you want to access some elements within it, instead of giving all of the td’s within the table a class name we can simply call it out via our table tag.
Creating the Table
First we have to make the table to modify it. We will create a table header and some dummy data for the body. For this example we will modify the table just using the base element tag. In this example we are also going to have some alternating row colors so we will give every other tr a class name “odd”.
Need help with cloud hosting? Try Server Intellect. We used them for our cloud hosting services and we are very happy with the results!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<thead>
<tr>
<th>Test Table Header</th>
<th>Test Table Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test Content</td>
<td>Test Content</td>
</tr>
<tr class="odd">
<td>Test Content</td>
<td>Test Content</td>
</tr>
<tr>
<td>Test Content</td>
<td>Test Content</td>
</tr>
<tr class="odd">
<td>Test Content</td>
<td>Test Content</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.
Our goal is to stylize this table with some spacing and colors without calling lots of individual classes. Lets write out all the CSS and go through how we are accessing the elements in the declaration.
table
{
width: 500px;
margin: 0 auto;
border-collapse:collapse;
}
table tr
{
background-color: #f7f7f7;
}
table .odd
{
background-color: #cfcfcf;
}
table tr:hover
{
background-color: #FFF;
}
table th
{
background-color: #056385;
color: #FFF;
}
table td
{
padding: 5px;
border-bottom: 1px solid #575757;
}
CSS Walkthrough
First we will give the table a width, center it, and collapse its borders (No gaps in between the cells). Next we access the tr element in the table by declaring table tr {} in our CSS. This allows us to call the all of the tr’s within the table, here we will set a default background color. Now remember we gave every other tr a class of odd now we will access those tr’s by calling table .odd {} in our CSS. This is calling of the elements with an odd class in the table and setting their background color tot he one declared. Lastly we access the th and td elements within the table and change their colors and add some padding and borders. After all is said and done your table should look like this.
I just signed up at Server Intellect and couldn’t be more pleased with my fully scalable & redundant cloud hosting! Check it out and see for yourself.
Success!
Great Job! Since you have successfully nested these elements you have the basics of nested declarations in CSS down pat. Your next challenge will be to access a links hover state within a list item, inside of an unordered list, inside of a content div. Okay Ill do it for you .contentdiv ul li a:hover {}. This is a very good practice to get into, it is especially helpful when dealing with dynamic content so developers do not need to insert the class into every element you create. You should always use nested declarations when relevant or you’ll end up living in a van, down by the river. Have a good one.
Calling Nested Elements
