In many cases, we need to implement the css or other things based on the condition that the parent tag has a child or not. For the same, I faced an issue of implement styles on parent tag if it has children.
I found many tutorials for solving this problem using jQuery or javascript. But I was looking the solution using css.
There is no way to implement styles on parent tag if it has children in CSS3 and CSS2. It may be we can get this feature in next CSS4. But using some tacts, We can achieve this feature.
Implement styles on parent tag if it has children
Example :-
My html structure is as follows:-
1 2 3 4 5 6 7 8 9 10 | <ul class="menu"> <li><a href="#">Section A</a> <ul><li> <a href="#">Section A.1 </a> </li></ul> </li> <li>Section B</li> <li>Section C</li> </ul> |
In this, I want to implement arrow on those LI tags which has UL as its children. Just see how we will achieve this.
1. Implement styles for the arrow on anchor tag of LI which will be implemented on every LI tag.
1 2 3 4 5 6 7 8 9 10 11 | .menu li a:after{ height:0; width: 0; top: 0; left: 100%; position:absolute; content: ' '; border-left: solid 5px green; border-top: solid 9px transparent; border-bottom: solid 9px transparent; } |
2. But for restricting this style to implement for only those LI’s which has UL as its children we need to do it like:
1 2 3 4 | .menu li a:only-child:after{ content: ' '; border:none; } |
In this, we need to implement both the above given styles. First we will add the styles to all anchors and then we will override the styles by using only-child pseudo-class selector means those LI’s which have only anchor as a child will be overridden by the styles written in 2nd step.
Note: The above given solution won’t work with all condition, but for given type of condition.