Fall 2017 - CENG 3507 LAB II

Question

Write the HTML code that will generate the above table by using the CSS definitions given below. You can't define new ids, classes, CSS definitions, or modify the given ones. Just in your HTML code use the appropriate tags, classes, and ids based on the CSS rules below.

You may check this page for CSS predefined color names.

#grid {
    border: 1px solid black;
    border-collapse: collapse;
    margin: 20px auto;
}
td, th { 
  border: 1px solid black; 
  width: 25px; 
  height: 25px; 
  background-color: gray;
  font-weight: normal; 
  text-align: center; 
  vertical-align: middle;
}
th { 
  background-color : deeppink; /* cells: 1,2,4,8,21 */
}
*[rowspan] { 
  background-color : mediumpurple; /* cell: 13 */
}
thead *[colspan] { 
  background-color : tan; /* cell: 3 */
}
#mid { 
  background-color : sienna; /* cell: 26 */
}
tfoot th { 
  background-color: steelblue; /* cell: 24,25,27,28 */
}
tr.a .b { 
   background-color: gold; /* cell: 19 */
}
tbody .x td:nth-child(odd) { 
   background-color : lime; /* cells: 15,17 */
}
th.xxx+td+td.yyy+td { 
   background-color: tomato; /* cells: 7, 11 */  
}

Question

Each part of this question gives some CSS definitions. For each one give an HTML code fragment which will contain an element which has a green background (i.e. selected by the relevant selector) when included in a document which has these definitions. Parts are independent of each other. Write "YES" as the HTML content of the selected element.

For an explanation and discussion of the !important rule see this blog post.

Example:

Question:

p em { background-color: green;}

<p>xx<em>YES</em>yy</p>

1. ul li.x .y { background-color: green; }

2. p + p.x + p a { background-color: green; }

3. [align=center] em:last-child { background-color: red !important; }
   [align=center] em:nth-child(3) { background-color: green; }
   

4. div span { background-color: red; }
   div > * > span { background-color: green; }

5. #q3 p + .a { background-color: red !important; }
   #q3 p ~ .a { background-color: green; }