How to select 1 of 2 or more input selectors in CSS?

[chrome]

---

input type=”text” name=”first-name” placeholder=”First Name” value=””>
input type=”text” name=”last-name” placeholder=”Last Name” value=””>

---

With the 2 input textboxes above, how do I select one to style in css without the other?

Example: 1

.box1 input[type=text]{
height: 30px;
}

this changes both (first and last name) to height of 30px.

but i wont to change both independently
(lets say first name 30px; last name 35px)
is this possible with pure CSS or is div selectors, then CSS selectors the best route?

example 2:

box1{
}

box1 input[type = text]{
height: 30px; /for the first name/
}

box2{
}

box2 input[type = text]{
height: 35px; /for the password/
}

---

Is the example 2 the best way to achive this or is example 1 possible?

[Shikkediel]

You don’t actually need to add a class, if the attribute values are unique for the page you could also do this:

[name^="first"] {
  height: 30px;
}

[name^="last"] {
  height: 35px;
}

https://www.w3schools.com/css/css_attribute_selectors.asp

[Author]

Posts