Just need understanding for this

Voids · March 27, 2017

<div id="form_area">
        <form>
          <h4>Current Project Task</h4>
          <textarea rows="4" name="" cols="50" id="add_current_task">
          </textarea>
          <input type="submit" value="ADD PROJECT TASK" class="button_style">
          <input type="reset" value="CLEAR" class="button_style">
        </form>
        <br>
        <form>
          <h4>Member Name</h4>
          <input type="text" name="" value="" id="add_task_member">
          <h4>Task Title</h4>
          <input type="text" name="" value="" id="add_task_title">
          <h4>Task Description</h4>
          <input type="text" name="" value="" id="add_task_desc">
          <input type="submit" value="Add Individual Task" class="button_style">
          <input type="reset" value="Reset" class="button_style">
        </form>
      </div>

The above is my HTML code in which I want the the second form to have the elements with "button_style" to have their own style.

#form_area form:nth-child(0n+3) .button_style, #form_area form:nth-child(0n+1) .button_style, #form_area_1 form:nth-child(1) .button_style{
  border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
color: #FFF;
height: 30px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.5);
}

This works fine, and the buttons in the first form and the second form held within the containing div element have the appropriate styles. However, why is it that is have to do form:nth-child(0n+3) to select the second form element, rather than (0n+2)

I am more curious than anything else.

Mr_KoKa · March 27, 2017

It matches when form is third element, so first element in #form_area is <form>, second elementis and the third is <form>.

So when you have:

<b>1</b>
<u>2</u>
<i>3</i>
<i>4</i>
<u>5</u>
<b>6</b>

to match 2nd tag you would :nth-child(6),

to match 2nd tag it would be :nth-child(4),

to match 1st tag it would be :nth-child(2),

the n thing specifies interval 2n is every second, 3n is every third and + makes it start at the value you're adding, so 3n+1 is every third element starting from first one.

For example:

<b>1</b>
<b>2</b>
<b>3</b> <-
<b>4</b> 
<b>5</b> <-
<b>6</b>
<b>7</b> <-

To match the above you would do b:nth-child(2n+3) - so matching every second starting from third.

You may also interested in nth-of-type. Look again at first example of and tags, with b:nth-of-type(2) you would match second same for i:nth-of-type(2), would select second and u:nth-of-type(2) would select second

Voids · March 28, 2017

20 hours ago, Mr_KoKa said:
It matches when form is third element, so first element in #form_area is <form>, second elementis and the third is <form>.

So when you have:
1
2
3
4
5
6
to match 2nd tag you would :nth-child(6),

to match 2nd tag it would be :nth-child(4),

to match 1st tag it would be :nth-child(2),

the n thing specifies interval 2n is every second, 3n is every third and + makes it start at the value you're adding, so 3n+1 is every third element starting from first one.

For example:
1
2
3 <-
4 
5 <-
6
7 <-
To match the above you would do b:nth-child(2n+3) - so matching every second starting from third.

You may also interested in nth-of-type. Look again at first example of and tags, with b:nth-of-type(2) you would match second same for i:nth-of-type(2), would select second and u:nth-of-type(2) would select second

Thank you for the in-depth explanation, I thought as much but was still unsure if I was correct. I have changed to the nth-of-type as it seems more appropriate to what I wanted/needed.