CODEWITHSUNDEEP
htmlcss
lakshmen
lakshmen

Reputation: 29064

Simplest way to convert all the classes to inline in CSS

I have some classes that are used for Styling and all of them display using block mode.. I would like to convert them all to inline.. Is there a simple way to convert them all to inline, instead of manually going to each class to convert them individually to inline...

Section of your code:

<div class="contentbody">
    <p>
        Register here!
    </p>
    <a href="{% url 'parent_register_step1' %}"
       class="bbutton textshadowclass boxshadow">
        <div class="boxshadowinset green">
            Register
        </div>
    </a>
    <p>
        Forgot your password?
    </p>
    <a href="{% url 'parent_forgot_password' %}"
       class="bbutton textshadowclass boxshadow">
        <div class="boxshadowinset green">
            Reset Password
        </div>
    </a>
</div>

I would like to change the classes bbutton, textshadowclass, box shadow, boxshadowinset green into inline.. What is the simplest way?

Note: This classes are used in other sections of the page. I would like to change the certain section to be inline only. It shouldn't affect the whole page...

Let me explain more in detail what i am doing: enter image description here

I would like to convert this into inline such that the register and reset password appear on the same line...

Upvotes: 1

Views: 1099

Answers (2)

Veger
Veger

Reputation: 37905

To only select the classes that are instead the contentbody class, you need a CSS element>element Selector:

div.contentbody>.bbutton, div.contentbody>.textshadowclass, ... {
  display: inline;
}

(add more classes to the list if you want others included as well)

Additional note: If you permanently need these classes to be inline, then I would suggest to just (once) going to each class and add an inline class to each element, this keeps your code clearer in the long run.

Edit:

use the union selector (sorry I cannot find a more official link) to select elements that have multiple classes set:

div.contentbody>.boxshadowinset.green {
  display: inline;
}

Note the . (and no space) between boxshadowinset and green

I do believe this is supported by modern browsers, but IE6 does seem to have some problems with it.

Upvotes: 1

Tim B James
Tim B James

Reputation: 20364

One way is just to apply an id to your wrapping element.

<div class="contentbody" id="contentbody">

Then in your css, add the styling

div#contentbody a, div#contentbody div{ display: inline; }

Due to CSS Element Hierarchy, they will all take the inline style rather than their own style.

Basic example here. http://jsfiddle.net/H97c5/2/

Upvotes: 1

Related Questions