example15_style_nesting - nest styles within other styles
nest selectors within selectors to represent css style inheritance
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