CSS Parent Class over other CSS Classes

Question

My Code Looks something like this:

input{
...
}

label{
...
}

<div class="textfield 1">
  <input tpye="text" id="fullname">
  <label for="fullname">Name</label>
</div>

<div class="textfield 2">
  <input tpye="text" id="fullname">
  <label for="fullname">Name</label>
</div>

<div class="textfield 3">
  <input tpye="text" id="fullname">
  <label for="fullname">Name</label>
</div>

now i want to apply the css only on one of the textfields and because the code is way to long to ad a ".textfield1" to every css element i want to ask if i can create a "parent class element" like:

.textfield1{

    input{
    ...
    }

    label{
    ...
    }
       }

.textfield2{

    input{
    ...
    }

    label{
    ...
    }
       }

It's like putting the styled elements in a Folder.

Is there a way to do that?

Thanks a lot in advance!

CSS no. SCSS yes. But your selectors are wrong anyway. It would be `.textField.1`. Except of course that [classes can not start with a number](https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors) so yours would be invalid. If you are only wanting to style one element why would you need to add a class to every element? Your question is unclear. — Turnip, Nov 10 '17 at 13:02

score 0 · Answer 1 · answered Nov 10 '17 at 13:12

0

You can use:

.textfield1 input {
    ...
}

.textfield1 label {
    ...
}

Check this link for more CSS selectors combinations: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

answered Nov 10 '17 at 13:12

Bikas

856
7
16

score 0 · Answer 2 · answered Nov 10 '17 at 13:15

As Turnip mentions in comments, you cannot have spaces in classnames. So instead of having class names such as textfield 1, you could have them like textfield1 - or something else. For the time being, I am using textfield1 to demonstrate the solution.

Now, you could use the descendant selector .textfield1 input (notice the space between the class name and tag name) or the child selector .textfield2 > input (notice the arrow > between the class name and tag name) to specify that given CSS rule must apply only to the descendants or children of given class.

input{
  border: 2px solid blue;
}

label{
  color: blue;
}

.textfield1 input {
  border: 2px solid red;
}

.textfield2 > input {
  border: 2px solid yellow;
}

<div class="textfield1">
  <input tpye="text" id="fullname">
  <label for="fullname">Name</label>
</div>

<div class="textfield2">
  <input tpye="text" id="fullname">
  <label for="fullname">Name</label>
</div>

<div class="textfield3">
  <input tpye="text" id="fullname">
  <label for="fullname">Name</label>
</div>

score 0 · Answer 3 · answered Nov 10 '17 at 13:25

If you use preprocessor like Sass or Less, you can nasted css like your example. It's not possible in the classical way.

In css:

.textfield2 input{
 ...
}

.textfield1 input{
 ...
}

.textfield1  label,  //<- if the label style of textfield1 and textefield2 are same
.textfield2  label{
 ...
}

Be careful, in your HTML you have a space between textfield and the number <div class="textfield 3">. That's mean your div has the CSS class textfield and the CSS class 3.

If you just want one class remove the space and the code above works.

If you keep the space, just modify .textfield2 to .textfield.2 with a dot between textfield and the number (to indicate that the style it's for the class textfield with the class 2)

CSS Parent Class over other CSS Classes

3 Answers3