Home

Conditional Styles

Applying a Style to the Next Element

You can create a style that would be applied to an HTML element only if/when that element follows a designated one. This is done using the + conditional operator between two names of tags or classes in the style definition. Here are examples:

 
<!DOCTYPE html>

<html>
<head>
<title>Energy</title>

<style>
h1 {
    color:       Red;
    font-size:   24pt;
    font-family: Bodoni;
}
/* h3 comes after h1 */
h1 + h3 {
    font-size:   14pt;
    color:       Purple;
    font-family: Cambria;
}
/* h3 comes after p */
p + h3 {
    font-size:   16pt;
    color:       Green;
    font-family: Algerian;
}
/* h3 precedes p */
h3 + p {
    color:       Olive;
    font-family: Times New Roman;
}
/* h3 precedes ul */
h3 + ul {
    font-size:   0.22in;
    font-family: Georgia;
    color:       fuchsia;
}
/* p precedes ul */
p + ul {
    color:       Blue;
    font-size:   0.22in;
    font-family: Script;
}
/* p comes after ul */
ul + p {
    color:       Maroon;
    font-size:   0.18in;
    font-family: Verdana;
}

a:link.references, a:active.references,
a:visited.references, a:hover.references
{
    font-size: 12pt;
    font-family: Courier New;
}
a:link.references    { color: Red;   }
a:active.references  { color: Bisque }
a:visited.references { color: Blue   }
a:hover.references   { color: Green  }
</style>

</head>
<body>

<h1>Energy</h1>

<h3>Introduction</h3>

<p>Energy is the result of (or produced from) work. Work can be done in various ways 
such as a person standing up to walk or run, burning a piece of wood to heat up a 
house, blowing in a musical instrument (like a trumpet or a saxophone) to produce 
music, letting water from a river rotate some turbines in a dam.</p>

<h3>Means of Work</h3>

<ul>
  <li>Heat: Energy can be the effect of an object that heats itself. This is the 
  example of the sun. An object can also be heated by other means. Such heating 
  effect produces energy
  <li>Move: This is work as the effect of an object that moves from one point to 
  another. It is this movement, or change in location, that produces energy</li>
</ul>

<p>Some of the most common ways to use energy are to produce electricity at home 
or in the office, to keep a vehicle moving through gas in the tank, or to boost 
agriculture production by spraying chemicals to plants. As a result, there are 
various ways to get energy: water, wind, heat, coal, etc.</p>

<h3>Forms of Energy</h3>

<p>Energy can be stagnant or transformed. Therefore, the two most common forms of 
energy are:</p>

<ul>
  <li>Potential Energy: This is energy that is stored in a substance or component. 
  For example, there is energy stored in water even when that water is not being 
  used or exploited</li>
  <li>Kinetic Energy: The energy is kinetic as a result of work. For example, 
  the movement of water in a river or in an ocean is work and that work 
  produces energy</li>
</ul>

<p>For the potential energy to be usable, it must be transferred to kinetic 
energy. Examples of how this transfer is done can be resumed as follows:</p>

<table border=5>
  <thead>
    <tr>
      <th><p>Object or Source</p></td>
      <th><p>Potential Energy</p></td>
      <th><p>Kinetic Energy</p></td>
    </tr>
  </thead>
  <tr>
    <td>Person</td>
    <td>Sitting down</td>
    <td>Walking or running</td>
  </tr>
  <tr>
    <td>Rock</td>
    <td>Laying at the pick of a hill</td>
    <td>Thrown away and moving/rolling</td>
  </tr>
  <tr>
    <td>Water or Liquid</td>
    <td>In a Bucket or in a Bottle</td>
    <td>Bucket leaking or bottle spilling</td>
  </tr>
  <tr>
    <td>Wood</td>
    <td>Laying down</td>
    <td>Burning</td>
  </tr>
  <tr>
    <td>Atom</td>
    <td>Untouched</td>
    <td>Atom being split
  </tr>
  <tr>
    <td>Musical Instrument</td>
    <td>Untouched</td>
    <td>Being played and producing sound</td>
  </tr>
</table>

<p><a class="references" href="formulas.htm">Energy Formulas</a> | 
   <a href="resources.htm" class="references">Labs Resources</a> | 
   <a href="help.htm" class="references">School Help</a></p>

</body>
</html>

This is for an HTML document that contains p, h3, and list elements among others:

  • h1 + h3 indicates that the style must be applied to an h3 element if/when that h3 element immediately follows an h1 element. If a certain h3 element is not created immediately after an h1 element, that style doesn't apply
  • p + ul indicates that the style must apply to an unordered list if/when that list immediately follows a p element. If an unordered list doesn't immediately a p element, that style doesn't apply
  • ul + p is the exact opposite of p + ul. It indicates that the style should apply to a p paragraph that comes immediately after an unordered list. If a p element is created after a type of element other than an unordered list, the style must be ignored

The above code would produce:

Applying a Style to the Next Element

Applying a Style to the Next Element

Applying a Style to the Next Element

Notice that the various p elements in the documents are formatted differently.

The above technique can also be applied to identified elements and classes. Here are examples:

<!DOCTYPE html>

<html>
<head>
<title>Energy</title>

<style>
#main-title {
    color:       Red;
    font-size:   24pt;
    font-family: Bodoni;
}
/* sub-title comes after main-title */
#main-title + .sub-title {
    font-size:   14pt;
    color:       Purple;
    font-family: Cambria;
}
/* sub-title comes after p */
p + .sub-title {
    font-size:   16pt;
    color:       Green;
    font-family: Algerian;
}
/* sub-title precedes p */
.sub-title + p {
    color:       Olive;
    font-family: Times New Roman;
}
/* h3 precedes ul */
.sub-title + ul {
    font-size:   0.22in;
    font-family: Georgia;
    color:       fuchsia;
}
/* p comes after ul */
ul + p {
    color:       Maroon;
    font-size:   0.18in;
    font-family: Verdana;
}
/* p precedes ul */
p + ul {
    color:       Blue;
    font-size:   0.22in;
    font-family: Script;
}

a:link.references, a:active.references,
a:visited.references, a:hover.references
{
    font-size: 12pt;
    font-family: Courier New;
}
a:link.references    { color: Red;   }
a:active.references  { color: Bisque }
a:visited.references { color: Blue   }
a:hover.references   { color: Green  }
</style>

</head>
<body>

<p id="main-title">Energy</p>

<p class="sub-title">Introduction</p>

<p>Energy is the result of (or produced from) work. Work can be done in various 
ways such as a person standing up to walk or run, burning a piece of wood to heat 
up a house, blowing in a musical instrument (like a trumpet or a saxophone) to 
produce music, letting water from a river rotate some turbines in a dam.</p>

<p class="sub-title">Means of Work</p>

<ul>
  <li>Heat: Energy can be the effect of an object that heats itself. This is the 
  example of the sun. An object can also be heated by other means. Such heating 
  effect produces energy
  <li>Move: This is work as the effect of an object that moves from one point to 
  another. It is this movement, or change in location, that produces energy</li>
</ul>

<p>Some of the most common ways to use energy are to produce electricity at home or 
in the office, to keep a vehicle moving through gas in the tank, or to boost 
agriculture production by spraying chemicals to plants. As a result, there are 
various ways to get energy: water, wind, heat, coal, etc.</p>

<p class="sub-title">Forms of Energy</p>

<p>Energy can be stagnant or transformed. Therefore, the two most common forms of 
energy are:</p>

<ul>
  <li>Potential Energy: This is energy that is stored in a substance or component. 
  For example, there is energy stored in water even when that water is not being 
  used or exploited</li>
  <li>Kinetic Energy: The energy is kinetic as a result of work. For example, 
  the movement of water in a river or in an ocean is work and that work 
  produces energy</li>
</ul>

<p>For the potential energy to be usable, it must be transferred to kinetic 
energy. Examples of how this transfer is done can be resumed as follows:</p>

<table border=5>
  <thead>
    <tr>
      <th><p>Object or Source</p></td>
      <th><p>Potential Energy</p></td>
      <th><p>Kinetic Energy</p></td>
    </tr>
  </thead>
  <tr>
    <td>Person</td>
    <td>Sitting down</td>
    <td>Walking or running</td>
  </tr>
  <tr>
    <td>Rock</td>
    <td>Laying at the pick of a hill</td>
    <td>Thrown away and moving/rolling</td>
  </tr>
  <tr>
    <td>Water or Liquid</td>
    <td>In a Bucket or in a Bottle</td>
    <td>Bucket leaking or bottle spilling</td>
  </tr>
  <tr>
    <td>Wood</td>
    <td>Laying down</td>
    <td>Burning</td>
  </tr>
  <tr>
    <td>Atom</td>
    <td>Untouched</td>
    <td>Atom being split
  </tr>
  <tr>
    <td>Musical Instrument</td>
    <td>Untouched</td>
    <td>Being played and producing sound</td>
  </tr>
</table>

<p><a class="references" href="formulas.htm">Energy Formulas</a> | 
   <a href="resources.htm" class="references">Labs Resources</a> | 
   <a href="help.htm" class="references">School Help</a></p>

</body>
</html>

The above code would produce:

Applying a Style to the Next Element

Applying a Style to a Nested Element

You can indicate that an element should receive a certain style only if it is nested in a specific element. This is done by leaving an empty space or using the > operator between the nesting tag or element and the nested tag or element in the style definition. Consider the following example:

<!DOCTYPE html>

<html>
<head>
<title>Energy</title>

<style>
p {
    font-family: Times New Roman;
    color:       black;
    font-size:   10pt; }

h3 {
    font-family: Georgia;
    font-size:   x-large;
    color:       red; }

h3 + p {
    font-family: Georgia;
    font-size:   0.42cm;
    color:       blue; }

li > h3 {
    color:       fuchsia;
    font-family: Bodoni MT Black;
    font-size:   0.22in; }

p + ul {
    font-family: Georgia;
    font-size:   0.42cm;
    color:       green; }

ul + p {
    color:       Maroon;
    font-family: Agency FB;
    font-size:   0.24in; }

a:link.references {
    color: Red;
    font-size: 12pt;
    font-family: Courier New; }

a:active.references {
    color: Bisque;
    font-size: 12pt;
    font-family: Courier New; }

a:visited.references {
    color: Blue;
    font-size: 12pt;
    font-family: Courier New; }

a:hover.references {
    color: Maroon;
    font-size: 12pt;
    font-family: Courier New; }
</style>

<head>
<body>

<h3>Forms of Energy</h3>

<p>Energy is work that produces heat. Work is the effect of an object that moves 
from one point to another. It is this movement, or change in location, that 
produces energy. As a result, there are various ways to get energy: water, wind, 
heat (if it is moving from an autonomous source, such as the sun), coal, etc.</p>

<p>The two most common forms of energy are:</p>

<ul>
  <li><h3>Potential Energy</h3>
    This is energy that is stored in a substance or component. For example, 
    there is energy stored in water even when that water is not being used or 
    exploited</li>
  <li><h3>Kinetic Energy</h3>
    <p>The energy is kinetic as a result of work. For example, the movement of 
    water in a river or in an ocean is work and that work can produce energy</p></li>
</ul>

<p>For the potential energy to be usable, it must be transferred to kinetic 
energy.</p>

<p><a class="references" href="formulas.htm">Energy Formulas</a> | 
   <a href="resources.htm" class="references">Labs Resources</a> | 
   <a href="help.htm" class="references">School Help</a></p>
</body>
</html>

The li > h3 code indicates that its style should apply to an h3 element if that element is nested in a list item. If the h3 element is not nested in a list item, the style doesn't apply. The above code would produce:

Applying a Style to a Nested Element

You can also conditionally apply a style on an element only if the element has a certain identification or is using a certain class. Here are examples:

<!DOCTYPE html>

<html>
<head>
<title>Energy</title>

<style>
#main-title {
    color:       Red;
    font-size:   24pt;
    font-family: Bodoni;
}
/* sub-title comes after main-title */
#main-title + .sub-title {
    font-size:   14pt;
    color:       Purple;
    font-family: Cambria;
}
/* sub-title comes after p */
p + .sub-title {
    font-size:   16pt;
    color:       Green;
    font-family: Algerian;
}
/* sub-title precedes p */
.sub-title + p {
    color:       Olive;
    font-family: Times New Roman;
}
/* h3 precedes ul */
.sub-title + ul {
    font-size:   0.22in;
    font-family: Georgia;
    color:       fuchsia;
}
/* p comes after ul */
ul + p {
    color:       Maroon;
    font-size:   0.18in;
    font-family: Verdana;
}
/* p precedes ul */
p + ul {
    color:       Blue;
    font-size:   0.22in;
    font-family: Script;
}
/* An element with class "key-word" is nested in a list item. */
li > .key-word {
    color:       fuchsia;
    font-family: Bodoni MT Black;
    font-size:   0.22in;
}
/* An element with class "key-word" is nested in a table cell. */
td .key-word {
    color:       DarkGreen;
    font-family: Comic Sans MS;
    font-size:   0.24in;
}
/* An element with class "key-word" is nested in a paragraph. */
p > .key-word {
    color:       Navy;
    font-family: Bell MT;
    font-size:   0.26in;
}
a:link.references, a:active.references,
a:visited.references, a:hover.references
{
    font-size: 12pt;
    font-family: Courier New;
}
a:link.references    { color: Red;   }
a:active.references  { color: Bisque }
a:visited.references { color: Blue   }
a:hover.references   { color: Green  }
</style>

</head>
<body>

<p id="main-title">Energy</p>

<p class="sub-title">Introduction</p>

<p>Energy is the result of (or produced from) work. Work can be done in various 
ways such as a <quote class="key-word">person</quote> standing up to walk or run, 
burning a piece of <quote class="key-word">wood</quote> to heat up a house, blowing 
in a <quote class="key-word">musical instrument</quote> (like a trumpet or a 
saxophone) to produce music, letting <quote class="key-word">water</quote> from 
a river rotate some turbines in a dam.</p>

<p class="sub-title">Means of Work</p>

<ul>
  <li>Heat: Energy can be the effect of an object that heats itself. This is the 
  example of the sun. An object can also be heated by other means. Such heating 
  effect produces energy
  <li>Move: This is work as the effect of an object that moves from one point to 
  another. It is this movement, or change in location, that produces energy</li>
</ul>

<p>Some of the most common ways to use energy are to produce 
<quote class="key-word">electricity</quote> at home or in the office, to keep a 
vehicle moving through <quote class="key-word">gas</quote> in the tank, or to 
boost agriculture production by spraying <quote class="key-word">chemicals</quote> 
to plants. As a result, there are various ways to get energy: water, wind, heat, 
coal, etc.</p>

<p class="sub-title">Forms of Energy</p>

<p>Energy can be stagnant or transformed. Therefore, the two most common forms of 
energy are:</p>

<ul>
  <li><p class="key-word">Potential Energy</p>
  <p>This is energy that is stored in a substance or component. 
  For example, there is energy stored in water even when that water is not being 
  used or exploited</li>
  <li><p class="key-word">Kinetic Energy</p>
  The energy is kinetic as a result of work. For example, 
  the movement of water in a river or in an ocean is work and that work produces 
  energy</li>
</ul>

<p>For the potential energy to be usable, it must be transferred to kinetic 
energy. Examples of how this transfer is done can be resumed as follows:</p>

<table border=5>
  <thead>
    <tr>
      <th><p>Object or Source</p></td>
      <th><p>Potential Energy</p></td>
      <th><p>Kinetic Energy</p></td>
    </tr>
  </thead>
  <tr>
    <td><p class="key-word">Person</p></td>
    <td>Sitting down</td>
    <td>Walking or running</td>
  </tr>
  <tr>
    <td><p class="key-word">Rock</p></td>
    <td>Laying at the pick of a hill</td>
    <td>Thrown away and moving/rolling</td>
  </tr>
  <tr>
    <td><p class="key-word">Water or Liquid</p></td>
    <td>In a Bucket or in a Bottle</td>
    <td>Bucket leaking or bottle spilling</td>
  </tr>
  <tr>
    <td><p class="key-word">Wood</p></td>
    <td>Laying down</td>
    <td>Burning</td>
  </tr>
  <tr>
    <td><p class="key-word">Atom</p></td>
    <td>Untouched</td>
    <td>Atom being split
  </tr>
  <tr>
    <td><p class="key-word">Musical Instrument</p></td>
    <td>Untouched</td>
    <td>Being played and producing sound</td>
  </tr>
</table>

<p><a class="references" href="formulas.htm">Energy Formulas</a> | 
   <a href="resources.htm" class="references">Labs Resources</a> | 
   <a href="help.htm" class="references">School Help</a></p>

</body>
</html>

The above code would produce:

Applying a Style to a Nested Element

Applying a Style to a Nested Element

Applying a Style to a Nested Element
 
 
 

The Same Style Name on Different Elements

You can create different styles that use the same class name but each name being used on only a particular element. To do this, when defining the style, precede its name with the name of the HTML element and a period. Then define the style any way want. Here are examples:

  • p {
    color:       black;
    font-size:   12pt;
    font-family: Times New Roman; }
    This style will apply to any stand-alone p element that has neither an id nor a class attribute
  • p.title {
    color:       red;
    font-size:   24pt;
    font-family: Georgia; }
    This style will apply to a p element if the class attribute of the start tag is assigned the title style name. If the class attribute is assigned a different name, even if it is a p element, this style will not apply
  • li.title {
    font-family: Calibri;
    color:       OrangeRed;
    font-size:   14pt; }
    This style will apply to an li element if its class attribute is assigned the title style name
  • a.shapes {
    font-size:   1.22em;
    color:       DarkRed;
    font-family: Franklin Gothic book; }
    The title style will apply to an a link element if the shapes name is assigned to its class attribute

Here are examples:

<!DOCTYPE html>

<html>
<head>
<title>Geometry: Regular Shapes</title>

<style>
p {
    color:       black;
    font-size:   12pt;
    font-family: Times New Roman; }
p.title {
    color:       red;
    font-size:   24pt;
    font-family: Georgia; }

td.presentation {
    font-size:   large;
    color:       Crimson;
    font-family: Cambria; }

a.shapes {
    font-size:   1.22em;
    color:       DarkRed;
    font-family: Franklin Gothic book; }

td.heading {
    font-size:   14pt;
    color:       Chocolate;
    font-family: Comic Sans MS; }

li.title {
    font-family: Calibri;
    color:       OrangeRed;
    font-size:   14pt; }

p.presentation {
    color:       black;
    font-size:   12pt;
    font-family: Times New Roman; }

p.shapes {
    color:       Green;
    font-family: Consolas; }

a.title {
    font-family: Arial;
    color:       Orange; }

li.heading {
    color:       blue;
    font-size:   12pt;
    font-family: Garamond; }
</style>

<head>
<body>

<p class="title">Geometry: Regular Shapes</p>

<p class="presentation">The study of geometry involves many categories of shapes or 
figures, including their characteristics. Geometry is used to calculate distances, 
perimeters, areas, <a href="volumes.htm" class="shapes">volumes</a>, angles, etc. 
Some of the geometry topics are:</p>

<ul>
  <li class="title">Distance:
    <p>Distance is the length between two fixed points</p></li>
  <li class="title">Area:
    <p class="shapes">The area is the two-dimensional extent that a shape 
    covers</p></li>
  <li class="title">Volume:
    <p>A volume is the amount of substance that an object can contain</p></li>
</ul>

<p class="shapes">The study of geometry includes polygons. A polygon is a closed 
flat shape that has at least three sides also called edges. In fact, the primary 
characteristic of a polygon is the number of its sides. Another important property 
of a polygon is whether it is regular or not. Facilies of polygons include:</p>

<ul>
  <li class="heading">The Square: A geometric shape with four equal sides
  <li class="heading">Triangle: A geometric shape with three sides
  <li class="heading">Rectangle: A geometric shape with four sides so that two 
  opposing sides are equal
</ul>

<p class="presentation">The caculations involving regular shapes are usually easy 
to perform because they include features of <a href="symmetry.htm"class="title">
symmetry</a> and/or <a href="volumes.htm" class="shapes">parallelism</a>. Here are 
examples of such calculations:</p>

<div align="center">
  <table border=5>
    <tr>
      <td>&nbsp;</td>
      <td class="heading">Perimeter/Circumference</td>
      <td class="heading">Area</td>
    </tr>
    <tr>
      <td class="presentation">Square</td>
      <td>Side * 4</td>
      <td>Side * Side</td>
    </tr>
    <tr>
      <td class="presentation">Circle</td>
      <td>Radius * 2 * PI</td>
      <td>Radius * Radius * PI</td>
    </tr>
    <tr>
      <td class="presentation">Perimeter</td>
      <td>(Length + Height) * 2</td>
      <td>Length * Height</td>
    </tr>
  </table>
<div>
<p><a href="aboutus.htm" class="title">About Us</a> | <a href="pt.htm" class="title">
Lab Resources</a> | <a href="services.htm" class="title">Services</a></p>

</body>
</html>

This would produce:

The Same Style Name on Different Elements

The Same Style Name on Different Elements

Shared Class Names and Nested Elements

You can combine the features we have seen so far, using the operators reviewed previously. Here are examples:

<!DOCTYPE html>

<html>
<head>

<title>Binary Classification</title>

<style>
p.title {
    color:       Red;
    font-size:   xx-large;
    font-family: Rockwell;
}

#description {
    color:       Black;
    font-size:   0.58cm;
    font-family: Garamond;
}

li.classification {
    font-family: Comic Sans MS;
    color:       Green;
}

p.classification {
    font-family: Garamond;
    color:       Navy;
}

td.title {
    color:       Navy;
    font-family: Forte;
    font-size:   1.45pc;
}

td .classification {
    color:       Teal;
    font-family: Antique;
    font-size:   1.45pc;
}

li > p.title {
    color:       Magenta;
    font-family: Georgia;
    font-size:   large;
}

li p.classification {
    font-family: Garamond;
    color:       Blue;
}

p.classification .reduction {
    color:       Navy;
    font-family: Agency FB;
    font-size:   Medium;
}

p.classification b, cite {
    color:       Maroon;
    font-family: Bodoni MT Black;
    font-size:   1.25pc;
}
</style>

<head>
<body>

<p class="title">Binary Classification</p>

<p id="description">Binary classification consists of classifying the outcomes of 
two sets of measures. The classification is made to find out whether something that 
was supposed to happen happened as it was predicted, or to made a conclusion 
about the resultant of something that was, or was not, supposed to happen. 
Binary classification is widely used in various disciplines:</p>

<ul>
  <li class="classification">Medicine: Used to evaluate pregnancies, to study 
  diseases, to monitor cancer 
  evolution on patients, etc</li>
  <li class="classification">Statistics: Used to evaluate the outcomes of 
  an experiment</li>
  <li class="classification">Sociology: Used to study people&#039;s (a person 
  in society, a crowd in a riot, 
  the employees of a company, etc) behavior</li>
  <li class="classification">Etc</li>
</ul>

<p id="description">Binary classification is applied to many types of studies 
and sometimes the results gotten in one discipline can directly be used in 
another discipline</p>

<p>The classification uses four expressions as:</p>

<ul>
  <li><p class="title">True Positive</p>
      <p class="classification">Also used as TP, this <quote class="reduction">condition indicates</quote> that <b>something was supposed to happen</b> and actually <cite>happened</cite></p>
  </li>
  <li><p class="title">True Negative</p>
      <p class="classification">Also used as TN, this <quote class="reduction">condition indicates</quote> that <b>something was supposed to happen</b> but <cite>did not happen</cite></p>
  </li>
  <li><p class="title">False Positive</p>
      <p class="classification">Also used as FP, this <quote class="reduction">condition indicates</quote> that <b>something was not supposed to happen</b> but actually <cite>happened</cite></p>
  </li>
  <li><p class="title">False Negative</p>
      <p class="classification">Also used as FN, this <quote class="reduction">condition indicates</quote> that <b>something was not supposed to happen</b> and effectively <cite>did not happened</cite></p>
  </li>
</ul>

<p class="classification">These expressions can be classified in a table as follows:</p>

<div align=center>
  <table border=6>
    <tr>
      <td>&nbsp;</td>
      <td class="title">True</td>
      <td class="title">False</td>
    </tr>
    <tr>
      <td class="title">Positive</td>
      <td><b class="classification">True Positive</b></td>
      <td><b class="classification">False Positive</b></td>
    </tr>
    <tr>
      <td class="title">Negative</td>
      <td><b class="classification">False Negative</b></td>
      <td><b class="classification">True Negative</b></td>
    </tr>
  </table>
</div>

</body>
</html>

This would produce:

Shared Class Names and Nested Elements

Shared Class Names and Nested Elements

    
   
 
Previous Copyright © 2015-2016, FunctionX Next