i just want to select First two inputs elements

user_17464962 0
Viewed 54

I want to just select the First two input and not last two. so please help me out from this and give a brief example for the not select if possible

 .converter .MainConversion input{
  display: block;
  margin: auto;
  width: 30%;
  font-size: 20px;
  padding: 3px;
  border: 0px;
  font-family: Montserrat;
  font-weight: 600;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 30px;
  text-align: center;
  background-color: rgb(177, 177, 177);
}
   <div class="converter">
          <div class="MainConversion">
            <div id="displayresult">
                <h5 id="HeaderDisplay">Enter the Value</h5>
                <p id="MistakeDisplay">Enter a width and height you want to convert for </p>
            </div>  
            <label for="ScreenWidth">Screen Width</label>
            <input type="text" name="ScreenWidth" id="ScreenWidth" placeholder="Enter the Width">
            <label for="ScreenHeight">Screen Height</label>
            <input type="text" name="ScreenHeight" id="ScreenHeight" placeholder="Enter the height">
            <label for="PxtoVw" >Number of Vw units</label>
            <input type="text" name="PxtoVw" id="PxtoVW" placeholder="Enter the Value">
            <p id="PxtoVwResult"></p>
            <label for="PxtoVh" >Number of Vh Units</label>
            <input type="text" name="PxtoVh" id="PxtoVh" placeholder="Enter the Value">
            <p id="PxtoVhResult"></p>
            <button class="DeviceButton" onclick="Calculate()">Check</button>
            <button class="DeviceButton" onclick="Clear()">Clear</button>
          </div>
        </div>

input css html
3 Answers

Here two possibility for you:

The easiest: Add a class on all inputs you want to get and juste select them like document.querySelectorAll('.classYouAdd');.

Or:

  1. Add the same class to the inputs you want to select.
  2. Select all inputs like document.querySelectorAll("input");
  3. Do a condition on all inputs you just get to check if they have the class you set.

https://developer.mozilla.org/fr/docs/Web/API/Document/querySelectorAll

user_162263930

Here is what you need

.MainConversion input:nth-of-type(-n+2) {
  background-color: blue; }

This way you select the first two input elements inside .MainConversion and you give the style you wish, in my case I've added a blue background.

user_179140980

You can use a famous pseudo-selector nth-child(n) to select the first to in this case. To learn more https://www.w3schools.com/cssref/sel_nth-child.asp Here's how would you do it in your case:

.converter .MainConversion input:nth-child(1),  .converter .MainConversion input:nth-child(2){
..
}

However, a more recommended way is to give a class to both the inputs, say 'my-input' and then give the styling:

.my-input{
  ..
}
user_178811880
Related