example15_style_nesting - nest styles within other styles

nest selectors within selectors to represent css style inheritance



show FuncyTag html string output

show FuncyStyle css string output

show Javascript source code

To Notice: This javascript code:
funcyStyle( '#header', {
              textAlign: 'center',
              h1: { fontSize_px: 20,
                    fontWeight: 'bold'
              },
              p: { fontSize_px: 16,
                   a: { color: 'red', textDecoration: 'none',
                     '&:hover': { backgroundColor:'green' }
                   }
              }
            }
          );
generates this css:
#header {
  text-align: center;
}
#header h1 {
  font-size: 20px;
  font-weight: bold;
}
#header p {
  font-size: 16px;
}
#header p a {
  color: red;
  text-decoration: none;
}
#header p a:hover {
  background-color: green;
}
(yes, this looks similar to LESS or Sass).
next: example_end top: all js examples