CODEWITHSUNDEEP
htmlcss
mystd
mystd

Reputation: 23

css3 formatting mutiple elements but not all of them

I have buttons I want to format with css I have found 2 options to format them: #id {} or button {} If I use #ID {} I can format a single button, if I use button {} I format all buttons on the page. I have different size buttons and I want to format a "group" of them. It's very annoying to format them with #id, is it possible to give them a group or use the same name for them and acces it with css?

Upvotes: 0

Views: 68

Answers (6)

Mr. Alien
Mr. Alien

Reputation: 157334

If you want to target the buttons in general than you can safely use

button { /* This will target all buttons */
   /* Styles goes here */
}

Or wrap them inside a container element, give it a class like

<div class="wrap_all_btn">
   <!-- All button goes here -->
</div>

CSS

div.wrap_all_btn button { 
   /* This will target buttons which are only inside a div 
      element having class .wrap_all_btn */
   /* Styles goes here */
}

To target buttons inside the wrapper uniquely, you can use nth-child or nth-of-type but I would prefer nth-of-type here as it is element specific, so if you want to target say 2nd button in the wrapper we made so you can write it like

div.wrap_all_btn button {
   /* This is where general styles go */
}


div.wrap_all_btn button:nth-of-type(2) {
   /* Create Unique Styles For 2nd Button Without Making Any Class */
}

Upvotes: 2

Sree ram
Sree ram

Reputation: 379

Instead of ID's use classes

HTML

/* Group 1*/

<button class="group1"></button>
<button class="group1"></button>
<button class="group1"></button>
<button class="group1"></button>

/* Group 2*/
<button class="group2"></button>
<button class="group2"></button>
<button class="group2"></button>
<button class="group2"></button>

CSS

.group1
{
Formatting Comes here..!!
}


.group2
{
Formatting Comes here..!!
}

Upvotes: 1

Pavlo Shandro
Pavlo Shandro

Reputation: 808

You can add few classes to element:

.button{font-size: 15px; color: #ff0000;...}
.button.small{font-size: 12px;}
.button.large{font-size: 18px;}

<input type="button" class="button" />
<input type="button" class="button small" />
<input type="button" class="button large" />

Upvotes: 0

Nitesh
Nitesh

Reputation: 15749

You can make a class and group your buttons on the basis of the different class attributes that you want to apply.

like

.button1{color:blue;}
.button2{color:red;}
.button3{color:green;}

So by doing this, you can apply multiple instances of the same classes as many times you want them to apply to your different buttons.

Hope this helps.

Upvotes: 0

MikeB
MikeB

Reputation: 2452

You could use a class.

HTML:

<input type="button" class="myClass">

CSS:

.myClass { width: 150px; }

Source: http://www.quackit.com/css/tutorial/css_class.cfm

Upvotes: 0

Gjordis
Gjordis

Reputation: 2550

styleClass defined inside html object.

<input type ="button" class = "myClass" ...(other values like value or id ...)/>

in css:

.myClass {
   //styling

 }

Upvotes: 0

Related Questions