CSS Styling elements within a DIV

Question

My DIV has css classes applied to it, but there are elements within the DIV that I want to be styled differently.

This is my DIV. .elm applies a basic width and height to it, this class is used on multiple DIV's. .large makes certain elements specific widths.

.elm {
    display: block;
    width: 300px;
    height: 38px;
  }

.large {
  width: 450px;
}

.large input, .large textarea {
  width: 400px;
}

.large select  {
  width:190px;
  display: inline;
}

.entry {
  width: 50px;
}
.selection {
  width: 50px;
}

<div class='elm large'>
  <label for="entry">Entry</label>
  <input type='text' id='entry' name='entry' value='' >

  <select id='selection' name='selection'>
  </select>
</div>

<hr>

<div class='elm large'>
  <label for="entry">Entry</label>
  <input class='entry' type='text' id='entry' name='entry' value='' >

  <select class='selection' id='selection' name='selection'>
  </select>
</div>

Some of the CSS appears to be working.

I have a new div that has been assigned .elm & .large, but I need to set the width of the inputs and select elements be be different. So I've added classes .entry & .selection, yet they are never set to those values.

Can someone advise how I do this correctly.

score 1 · Accepted Answer · answered Jan 29 '19 at 09:11

This due to CSS specificity. Defening .entry is more global where .large .entry is more specific and at the same specificity as .large input

.elm {
    display: block;
    width: 300px;
    height: 38px;
  }

.large {
  width: 450px;
}

.large input, .large textarea {
  width: 400px;
}

.large select  {
  width:190px;
  display: inline;
}

.large .entry {
  width: 50px;
}

.large .selection {
  width: 50px;
}

<div class='elm large'>
  <label for="entry">Entry</label>
  <input type='text' id='entry' name='entry' value='' >

  <select id='selection' name='selection'>
  </select>
</div>

<hr>

<div class='elm large'>
  <label for="entry">Entry</label>
  <input class='entry' type='text' id='entry' name='entry' value='' >

  <select class='selection' id='selection' name='selection'>
  </select>
</div>

Thanks this has worked great :) – Rocket Jan 29 '19 at 13:02 — Rocket, Jan 29 '19 at 13:02

score 1 · Answer 2 · answered Jan 29 '19 at 09:14

I have added this. I have added their element name and class name so this will high priority.

div.large input.entry {
width: 50px;}

div.large input .selection {
width: 50px;}

.elm {
        display: block;
        width: 300px;
        height: 38px;
    }

.large {
    width: 450px;
}

.large input, .large textarea {
    width: 400px;
}

.large select  {
    width:190px;
    display: inline;
}



div.large input.entry {
width: 50px;
}
div.large input .selection {
width: 50px;
}

<div class='elm large'>
    <label for="entry">Entry</label>
    <input class='entry' type='text' id='entry' name='entry' value='' >

    <select class='selection' id='selection' name='selection'>
    </select>
</div>

But what if `.large` will change to a `section` or `.entry` will be used on a `textarea` are you going to define all the possible selectors for that? — SuperDJ, Jan 29 '19 at 09:16

CSS Styling elements within a DIV

2 Answers2