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

0

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

answered Jul 10, 2016 at 13:31

Chaitanya Kale

2411 silver badge7 bronze badges

Comments

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

0

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;
 }

answered Jul 10, 2016 at 13:55

Ahmer Khan

7771 gold badge10 silver badges31 bronze badges

Collectives™ on Stack Overflow

Implementing css to parent element only

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related