Simple project to get the missing CSS selectors we all wished for . These include selectors based on Symbol names, Layout names and Scene names. So, the following is now possible (example):
<style>
.First-Scene.Phone .TextBlock{
background-color:#ff0000;
}
.First-Scene.Tablet-Landscape .TextBlock{
background-color:#00ff00;
}
.Second-Scene.Phone .TextBlock{
background-color:#0000ff;
}
.Second-Scene.Tablet-Landscape .TextBlock{
background-color:#ffff00;
}
.Second-Scene.Tablet-Landscape .headline{
font-weight:bold;
}
.Second-Scene.Tablet-Landscape .content{
font-size:12px!important;
}
</style>
Download Example
HypeMissingSelectors.hype.zip
Demo Example
HypeMissingSelectors.html
Drag window width in example
PS: Many properties can be manipulated in pure Hype but this example exists to demonstrate that now elements (Scenes, Layouts and Symbols) can be targeted by name if needed when using this little extension.
Code repository on GitHub
Version history
1.0 Initial release under MIT-license
Content Delivery Network (CDN)
Latest version can be linked into your project using the following in the head section of your project:
<script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypeMissingSelectors/HypeMissingSelectors.min.js"></script>
Optionally you can also link a SRI version or specific releases.
Read more about that on the JsDelivr (CDN) page for this extension at https://www.jsdelivr.com/package/gh/worldoptimizer/HypeMissingSelectors
Learn how to use the latest extension version and how to combine extensions into one file at