How to select the specific position element in the certain class in CSS


Tags: html,css,css-selectors

Problem :

Here is my part of HTML code:

<label>
    Work&nbsp;Address:
</label>
<input type="text" id="workAddress0" name="workAddress0">
<input type="button" value="+" class="btn btn-small" onclick="ui.createTextfield('work')"><br>

<label>
    Hobby&nbsp;Address:
</label>
<input type="text" id="hobbyAddress0" name="hobbyAddress0">
<input type="button" value="+" class="btn btn-small" onclick="ui.createTextfield('hobby')"><br>

My CSS is:

.btn.btn-small:first-of-type{ 
position: absolute;
left: 953px;
top:290px;
height: 40px;
text-align: center;
}

.btn.btn-small:nth-of-type(2){ 
position: absolute;
left: 953px;
top:337px;
height: 40px;
text-align: center;
}

I want to set the first button to the top 290px and second button to top 337px; But this select doesn't work. Could you tell me how to realize that ? I want to select the first and the second of this class(btn btn-small) separately. Thank you in advance



Solution :

:first-of-type will look here for first appearance of a tag, here input or label and will select it if it has also the class . here your first-of-type input has no class at all, it will never be selected.

You can try to use the ~ selector to jump class to class.

.btn.btn-small {
  position: absolute;
  left: 953px;
  top: 290px;
  height: 40px;
  text-align: center;
}
.btn.btn-small ~.btn.btn-small {
  position: absolute;
  left: 953px;
  top: 337px;
  height: 40px;
  text-align: center;
}
.btn.btn-small ~.btn.btn-small ~ .btn.btn-small {
  top: auto;/* reset here , else third, forth will be at 337px; */
}
<label>
  Work&nbsp;Address:
</label>
<input type="text" id="workAddress0" name="workAddress0">
<input type="button" value="+" class="btn btn-small" onclick="ui.createTextfield('work')">
<br>

<label>
  Hobby&nbsp;Address:
</label>
<input type="text" id="hobbyAddress0" name="hobbyAddress0">
<input type="button" value="+" class="btn btn-small" onclick="ui.createTextfield('hobby')">
<br>


    CSS Howto..

    How to take an element over to given padding with CSS

    Jquery how to set active link css color

    How to convert list of buttons to radio buttons based on row overflow?

    How to select the first type of child of a particular CSS using CSS selector [duplicate]

    How to apply custom css to split post into multiple page

    How to reset Chrome dev tools CSS styles filter?

    How to retrieve the real height of a #div (including overflowed parts)

    How to find out if the user scrolled to the end of a HTML container with jQuery?

    How to remove and override CSS attribute from parent class?

    How to choose font different font-weight? use bolder one or just font-weight?

    Normalized CSS, option in JSFiddle, how to add it to document

    Css - How to override css for a table cell

    how can i center the text inside my css div circle

    How do I use CSS to centre this content?

    CSS - How to align 2 fields into 1 row?

    how to select a input using jquery

    Html and css. Social buttons how to move them?

    How to draw a CSS petagon with all borders radius?

    How to add css to form elements if attribute class is already being used in Jquery

    How to slide a image in background in css?

    Two buttons vertically misaligning, how to align them properly?

    How to remove the background in a slick carousel?

    How to select the second th into the thead of a table having a specific ID using CSS?

    How to make a grid (like graph paper grid) with just css?

    How could I use the html a tag to change div width and height?

    How to resize a div container to fit overflow from a child div

    How can I set the Eclipse JS to edit a file as CSS

    How to implement block style for list

    How to use a JQuery Show/Hide script, to show hidden text

    how to link css files in organization github pages