Twig I can include code in CSS? - css

Question

I have this code currently does not work, is there any alternative to it?
<ul class="sub">
{% for key, c in categori %}
<style>
#nav.{{c.id}}:hover
{
background-color: #{{c.color}};
}
</style>
<li class="{{c.id}}">
<a href="{{ path('categoria', {'id': c.id} )}}">{{ c.nombre }}
....
I have the problem as in # nav. {{c.id}}
ow.ly/i/3vwNp this is the example
Thanks!

Answer 1

The way your CSS is written, it expects the element with the class {{ c.id }} (as interpreted by the Twig parser) to be on the same element with the id nav, e.g.
<li id="nav" class="{{ c.id }}">...</li>
You really shouldn't have more than one element on a page with the same id attribute, strange things happen with JavaScript particularly when you do.
Instead of trying to programmatically define your {{ c.id }} in the style though, why not do something like this?
<style>
#nav .item:hover
{
background-color: #{{c.color}};
}
</style>
...
<ul id="nav" class="sub">
{% for key, c in categori %}
<li class="item {{c.id}}"><a href="{{ path('categoria', {'id': c.id} )}}">{{ c.nombre }}</li>
{% endfor %}
</ul>
You really should only be placing CSS in <style> tags at the top of the document any way, or as better practice teasing them out to .css resource files to include.

Answer 2

This would definitely work:
<ul class="sub">
{% for c in categori %}
<style>
.element{{c.id}} a:hover { background-color: #{{c.color}}; }
</style>
<li class="element{{c.id}}">
<a href="{{ path('categoria', {'id': c.id} )}}">{{ c.nombre }}
...
But it's recommended to separate your CSS rules from HTML and move all your predefined element classes to external CSS asset.