Implementing css to parent element only

Question

I am currently working on a navigation menu where any menu item doesn't fit onto available space get appended onto a hidden unordered list(ul) which can be accessed through a toggle button. What I would like to achieve is to display Group-1, Group-2...as inline-block without affecting css of child elements.I am trying to use below css;

.hidden-link{ display:inline-block; }

However when I use this line it changes all children element's property to show in a row rather that in a table format. I have tried jquery as well but no win.

$(document).ready(function(){ $("ul.hidden-links").children().css("display","inline-block"); });

e.g

<div class="container"> <ul class='hidden-links hidden'> <li>Group1 <ul class ="flash"> <li>item-1</li> <li>item-1</li> <li>item-1</li> </ul> </li> <li>Group2 <ul class ="flash"> <li>item-1</li> <li>item-1</li> <li>item-1</li> </ul> </li> <li>Group3 <ul class ="flash"> <li>item-1</li> <li>item-1</li> <li>item-1</li> </ul> </li> </ul> </div>

Your html is invalid. You can use only li in root of ul. — Mohammad
– Mohammad, Commented Jul 10, 2016 at 12:41
Is there a way to achieve this using jquery so that only css can be applied on the parent element. — Gautam P Behera
– Gautam P Behera, Commented Jul 10, 2016 at 12:49

Paulie_D · Accepted Answer · 2016-07-10 13:08:40Z

1

If I understand you correctly, you only need to select the direct children of the menu.

Then this is all you need.

$(document).ready(function(){ $("ul.hidden-links > li").css("display","inline-block"); });

answered Jul 10, 2016 at 13:08

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gautam P Behera Over a year ago

Thanks Paulie it did work when used you specified selector in css :-) ul.hidden-links > li{ display: inline-block; }

Chaitanya Kale · Accepted Answer · 2016-07-10 13:31:40Z

If you want each element do be shown on a separate row, then you should be using display: block instead of `inline-block'.

More info on inline-block here http://www.w3schools.com/css/css_inline-block.asp

Ahmer Khan · Accepted Answer · 2016-07-10 13:55:36Z

You can use simple css tricks to tackle this problem. Styled both ul in different css.

.hidden-links li{ display: inline-block; } li .flash li{ display: block; }

Collectives™ on Stack Overflow

Implementing css to parent element only

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related