CSS multiple input element

Question

I was trying out CSS and I do not know why my 2nd input follows the css ruling even though I didn't declare in the class.

.container2 input[type="text"],input[type="password"] {
  width: 80%;
  padding: 15px 22px;
  margin: 10px 5px;
  box-sizing: border-box; 
}

<div>
  <input type="text" placeholder="no container 1">
  <input type="password" placeholder="no container 2">
</div>

<div class="container2">
  <input type="text" placeholder="no container 3">
  <input type="password" placeholder="got container 4">
</div>

https://www.bitdegree.org/learn/best-code-editor/G3Dzq6Ct/1

Because you are declaring password field css without parent selector. need to add like this: `.container2 input[type="password"]` — Minal Chauhan, Dec 31 '20 at 10:19

pavel · Accepted Answer · 2020-12-31T10:24:43.053

3

Your code means 'text input in .container2 and all password inputs'. Add .container2 before password too.

.container2 input[type="text"], .container2 input[type="password"]

In this case you can use simplier selector for the same result (just in this case, not in general)

.container2 input {...}

edited Dec 31 '20 at 10:24

answered Dec 31 '20 at 10:19

pavel

25,361
10
41
58

score 1 · Answer 2 · answered Dec 31 '20 at 10:21

In CSS; you start a new declaration after ",". So that you have to start with adding .container2 parent for both.

So you should use

.container2 input[type="text"], .container2 input[type="password"]   {
    width: 80%;
    padding: 15px 22px;
    margin: 10px 5px;
    box-sizing: border-box; 
}

CSS multiple input element

2 Answers2