CSS3 :target with only HTML style

Question

I've got a challenge I'm trying to solve.

I'm trying to create a page that has tabs to switch between content, without using Javascript or inline/external CSS. I'd like to use the :target function but the absolute only way I can use CSS in this instance is through style="" from the HTML.

Is it possible to switch between pages (like you'd see with tabs and JavaScript) with only using CSS3 inside HTML style tags for an element?

Literally, I can't even use <style>. The only way I can use CSS is via <div style=""> or via the style of another HTML tag.

I know this sounds ridiculous, but it's a sort of challenge I guess. Just curious if it's possible.

Okay, so the code I'd like to use is as follows:

<div id="container">
    <p style="text-align:center;">CSS3 TABS. <b><i>NO JAVASCRIPT </i></b></p>
    <div id="tabs">
        <ul>
            <li id="One"><a href="#One" id="first">One</a>
                <div>
                    <p>p1</p>
                </div>
            </li>
            <li id="Two"><a href="#Two" id="sec">Two</a>
                <div>
                    <p>p2</p>
                </div>
            </li>
            <li id="Three"><a href="#Three" id="third">Three</a>
                <div>
                    <p>p3</p>
                </div>
            </li>
        </ul>
    </div>
</div>

<strong>CSS</strong>
li div {
    -moz-transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    border: 1px solid #888888;
    float: left;
    opacity: 0;
    padding: 0 15px;
    position: absolute;
    visibility: hidden;
    width: 250px;
    left:0;
    background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 85px) repeat scroll 0 0 transparent;
}

#tabs li a{
    background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 18px) repeat scroll 0 0 transparent;
    border: 1px solid #888888;
    margin: 0 3px 0 0;
    padding: 5px 25px;
    position: relative;
    z-index:1;
    font-size: 14px;
    border-radius:10px 10px 0 0;
    display:block;
    top:1px;
}

#One:target div, #Two:target div, #Three:target div{
    opacity:1;
    visibility:visible;
}

So far, I've converted everything but the :target part.

<div id="container">
    <p style="text-align: center;">Test</p>
    <div id="tabs">
        <ul>
            <li id="One">
            <a href="#One" id="first"
            style="
            background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 18px) repeat scroll 0 0 transparent;
            border: 1px solid #888888; margin: 0 3px 0 0; padding: 5px 25px; position: relative; z-index:1;
            font-size: 14px; border-radius:10px 10px 0 0; display:block; top:1px;
            ">
            One</a>
                <div style="-moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; border: 1px solid #888888;
                float: left; opacity: 0; padding: 0 15px; position: absolute; visibility: hidden; width: 250px; left:0;
                background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 85px) repeat scroll 0 0 transparent;">
                    <p>Page 1</p>
                </div>
            </li>
            <li id="Two">
            <a href="#Two" id="sec"
            style="
            background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 18px) repeat scroll 0 0 transparent;
            border: 1px solid #888888; margin: 0 3px 0 0; padding: 5px 25px; position: relative; z-index:1;
            font-size: 14px; border-radius:10px 10px 0 0; display:block; top:1px;
            ">
            Two</a>
                <div style="-moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; border: 1px solid #888888;
                float: left; opacity: 0; padding: 0 15px; position: absolute; visibility: hidden; width: 250px; left:0;
                background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 85px) repeat scroll 0 0 transparent;">
                    <p>Page 2</p>
                </div>
            </li>
        </ul>
    </div>
</div>

It's complicated. For the sake of this request, let's work with it. — Sasstraliss, Dec 06 '13 at 23:50
You can't have pseudo CSS classes in the inline style. http://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles — opnarius, Dec 07 '13 at 00:11
Looks like you are trying to pull this off for an email template? Firstly, you can't have pseudo selectors with inline style. #2, to switch tabs, you'll need to fire a click-event. Unlike hover, there are no pseudo selectors to target click events with CSS. I'd be pretty damn impressed, if someone pulls this off with no javascript and just inline CSS. — Thilak Rao, Jan 02 '14 at 06:53

score 0 · Answer 1 · answered Jan 25 '14 at 14:10

if you using style in html there are only 2 ways either <style> ... </style> or <div style="..."> ... </div> No other way..

CSS3 :target with only HTML style

1 Answers1