Styling Lists with Style + CSS parent = EQCSS.js
2 min read
Are you tired of the boring bullets and circles for your html lists? What about styling lists with style using the awesomeness of Bootstrap Glyphicons instead?
 
Apply these icons the easy way with this css code or try this fiddle:
/* Using a Bootstrap glyphicon-menu-right as the bullet point */
li {list-style: none;}
li:before
{
display: block;
content: "\e080";
font-family: 'Glyphicons Halflings';
float: left;
margin-top: 4px;
margin-left: -17px;
}
You also need the Bootstrap libraries (get the version you want from cdnjs.com):
<!-- load the bootstrap framework: --> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
For the list of Glyphicons codes available, visit Bootstrap or W3schools:
That was the easy part. Now, all the list icons are the same. You may want to improve this a little bit for styling lists more efficiently.
Imagine you can automatically, via CSS, apply a different style for list elements that contains a sub-list, and those only! Then you would need to apply a different style for the <li> that immediately precedes an <ul>. In other words, you need to apply a different style to the parent list element of sub lists.
Unfortunately and for the time being, you have to rely on JavaScript for that.
Is there a way to select the CSS parent of an element?
Long story short, no.
CSS already has a descendant selector, >, that allows us to select only the elements that belong to a certain element, but there is no equivalent < selector to go the other way.
W3C has announced recently the implementation of the relational pseudo-class :has() :
The relational pseudo-class, :has(), is a functional pseudo-class taking a relative selector list as an argument. It represents an element if any of the relative selectors, when absolutized and evaluated with the element as the :scope elements, would match at least one element.
This method only selects elements containing specified content. For example, a:has(>img) selects all <a> elements that contain an <img> child.
As of today, December 2017, it’s still not supported by any browser on the market, nor do they plan it in the near future:
Easy solution for CSS parent element: EQCSS.js
This is not just for lists. EQCSS is a Polyfill that introduces Element Queries, Scoped CSS,
selectors for parent, next, and previous elements to all browsers IE8 and up. In other words, EQCSS brings HTML5 elements and CSS3 to older browsers!
For widget Categories list featured here, a different style for list element preceding a sub-list is applied. This is done with this code, jsfiddle here:
/* Using a different style for <li> parents of <ul> */
@element ul {
$parent:before {
content: "\e072" !important; /* necessary since you set the style for all other li earlier in your code */
}
}
And the EQCSS libraries:
<!-- load the EQCSS framework: --> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/eqcss/1.7.3/EQCSS.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/eqcss/1.7.3/EQCSS-polyfills.min.js"></script>
So you start with the @element which you need the child to be different. Provides tons of conditional options such as minimum character length or element sizes to trigger events, meta selectors, functions, evals and more. More details on EQCSS and demos available here.
