CODEWITHSUNDEEP
css
Ubaid Rehman
Ubaid Rehman

Reputation: 93

css grouping element under one class

Is there a way to group all the elements by referencing a class:

For example:

.formres select input[type="file"] input[type="email"] input[type="text"] input[type="password"] {
    width: 150px;
}

This is not working though, I want all the elements inside the class .formres to be width 150. Wondering if this is possible or if I have to write individual values.

PS

I already know about the comma way,

.formres select, .formres input[type="file"], .formres input[type="email"], .formres input[type="text"], .formres input[type="password"] {
    width: 150px;
}

some other way to do it, by some operator ? that does not require class name again and again.

Upvotes: 2

Views: 538

Answers (2)

user663031
user663031

Reputation:

I want all the elements inside the class .formres to be width 150.

I assume you mean all direct children.

some other way to do it, by some operator ? that does not require class name again and again.

Yes, the operator you are looking for is the universal selector, the asterisk (*), which selects any element.

.formres > * { width: 150px; }

You might also consider using a container inside .formres with the desired width, and put the input elements inside that. They will expand to fill its width:

<form class="formres">
  <div class="container">
    <input type="text"...

.formres .container { width: 150px; }

Upvotes: 1

Johannes
Johannes

Reputation: 67758

You can write it like this:

.formres input[type="file"], .formres input[type="email"], .formres input[type="text"], .formres input[type="password"] {
    width: 150px;
}

ADDITION:

If you only have one or two input elements inside the DIV with that class which should NOT get the 150px width, you might use something like

.formres input {
  width: 150px;
}
.formres input[type="xxxx"] {
  width: auto;
}

The first will give all elements 150px width, the second will define/overwrite the one which doesn't get 150px, but the default auto.

Upvotes: 1

Related Questions