html - Add css rule specific to component with multiple classes -
i have following html code:
<li id=treemenu:2 class="ui-treenode ui-treenode-leaf ui-treenode-unselected" role=treeitem sizset="false" data-nodetype="default" data-rowkey="2" sizcache0014053099738481567="771 85 282"> <span aria-expanded=false aria-checked=false class="ui-treenode-content ui-tree-selectable" aria-selected=false sizset="false" sizcache0014053099738481567="771 85 282"> <span class=ui-treenode-leaf-icon></span> <div class="ui-chkbox ui-widget" sizset="false" sizcache0014053099738481567="771 85 282"> <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default"> <span class="ui-chkbox-icon ui-c"></span> </div> </div> <span></span> <span class="ui-treenode-label ui-corner-all">dfvc</span> </span> </li>
i need add css rule li components "ui-treenode ui-treenode-leaf ui-treenode-unselected" class , besides applies div component inside on li:
<div class="ui-chkbox ui-widget" sizset="false" sizcache0014053099738481567="771 85 282">
i've created following rule doesn't work
li .ui-treenode-leaf span div .ui-chkbox { position: relative !important; top: -15px !important; }
i'm working on ie8 , html generated node (node without leaf) of tree component of "primefaces" (tree component on showcase example)
what correct css rule?
one problem have rule looking tag class 'tree-node-leaf' within li
.
to indicate want target tag specific class, not put space between tag , class.
li.tree-node-leaf
targets li
class.
li .tree-node-leaf
targets tag class tree-node-leaf
within li
.
the same done id selectors, li#id
targets li
id of id
. li #id
targets element id id
within li
.
as pavlo has said, should try keep selectors simple possible - increases maintenance , reduces chances of small mistakes becoming big problems.
try this:
li.ui-treenode-leaf span div.ui-chkbox { position: relative !important; top: -15px !important; }
Comments
Post a Comment