CSS: Is it possible to specify a style to a fieldset before another fieldset?

CSS: Is it possible to specify a style to a fieldset before another fieldset? When Two fieldset follow in my code I would like to apply them a specific style.

EDIT Without using class and id of course...

Here is my code

        <div id="tabs">
            <fieldset class="one">
                <legend>One</legend>
                Text
            </fieldset>
            <fieldset class="two">
                <legend>Two</legend>
                Text
            </fieldset>
        </div>

Ths give me this :

And I would like this :

Answers


With CSS you can apply styles only to child of any element or siblings of it, that's why we can apply style only on second fieldset using + Adjacent sibling selector. In following demo i will show how to do it.

About all possible CSS2 selector you can read in specification to make yourself understand: what you can made with css selector and what not

May be my explanation demo on dabblet.com can help you to solve your problem.

The result:

HTML markup:

<fieldset> </fieldset>
<fieldset> </fieldset>
<fieldset> </fieldset>
<fieldset> </fieldset>

CSS markup:

/* detect only first fieldset */
fieldset:first-child {
    background-color: green;
}

/* detect all sibling fieldset element after first one */
fieldset:first-child ~ fieldset {
    background-color: gray; 
}

/* detect only first sibling fieldset element after first one */
fieldset:first-child + fieldset {
    background-color: red;
}

Without using any classes or id's you can use first-child to target the first one and then use the default styling for second.

e.g.

form fieldset{ background: green; }
form fieldset:first-child{ background: red; }

First fieldset will have a red background, any others will have a green background. Note though this is for fieldsets within the same form. If they are in separate forms, then you can apply the same principle using the form:first-child


Why not assign each one a specific class or ID?

<fieldset class="firstset"></fieldset>
<fieldset class="secondset"></fieldset>

If you want to avoid using ID or class names , then go for the first-child property.

For eg -

form fieldset:first-child{
  //your css code here
}

If you don't want to use classes or id's but still want them to have different styles, how about using inline CSS for each fieldset?

Is there a particularly good reason to avoid classes and id's while still wanting to use CSS? With a little more detail, we can probably give you a better answer.


Need Your Help

Java convert String[] to int[]

java collections

I have a String[], where each element is convertible to an integer. What's the best way I can convert this to an int[]?