Regular expression on CSS

Question

My full code is posted here Apply Range for Class and ID in CSS

My JSfiddle - http://jsfiddle.net/9Tpzp/

My existing CSS code is like below

#tab1:target ~ .tabs .tab1 dd div {
   height: 28px;
}
#tab2:target ~ .tabs .tab2 dd div {
   height: 28px;
}
#tab3:target ~ .tabs .tab3 dd div {
   height: 28px;
}
#tab4:target ~ .tabs .tab4 dd div {
   height: 28px;
}

I changed as below

[id*='tab']:target ~ .tabs [class*='tab'] dd div {
    height : 28px;
}

HTML:

<body>
        <div class="container">

            <div class="accordion">
                <span id="tab1"></span>
                <span id="tab2"></span>
                <div class="tabs">
                    <dl class="tab1">
                        <dd>
                            <a href="#tab1">Tab #1</a>
                            <div><p>Tab1</p></div>
                        </dd>
                    </dl>
                    <dl class="tab2">
                        <dd>
                            <a href="#tab2">Tab #2</a>
                            <div>
                                <p>
                                   Tab2
                                </p>
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>

        </div>
    </body>

Now how can i specify the number range 1-4 in that regular expression.

If it is impossible in CSS, Can we achieve through any other way like jquery,etc,.

If you mean you want the class regex to be something like tab[1-4], I don't think CSS supports that. — mathematical.coffee
– mathematical.coffee, Commented Feb 4, 2014 at 3:34
can we achieve through any other way like jquery, etc,. @mathematical.coffee — Hariharan
– Hariharan, Commented Feb 4, 2014 at 3:36

Hariharan · Accepted Answer · 2014-02-04 05:54:19Z

1

Solved the problem by using jquery. Below is the fix.

$(document).on('click','a[href^="#tab"]',function(){
                $('a[href^="#tab"]').siblings('div').css('height',0);
                if($(this).siblings('div').height() == 0){
                        $(this).siblings('div').css('height',28); 
            }
                else {
                $(this).siblings('div').css('height',0);
            }       
            })

answered Feb 4, 2014 at 5:54

Hariharan

3,2834 gold badges22 silver badges31 bronze badges

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

Collectives™ on Stack Overflow

Regular expression on CSS

HTML:

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

HTML:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related