Target only one of the buttons with CSS

Question

This is a 2 part question, the first one being how do I change the design on only one of my two buttons? I have two submit buttons in HTML, coding being

and I want to change the design on them individually in CSS. I've tried with this for the first button (in CSS):

input:first-child{
    font-size: 20px;
    font-family: Tunga;
    background-color: rgb(051,103,149);
    color: white;
}

and it works, but

input:second-child{ "other coding stuff"}

doesn't work to change the other one. What's the problem?

My second question is, how do I place a small "replay"-icon in the far left of the second button? I've tried with this:

background-image: url('replaybutton.png');
background-position: 10px 10px; 
background-repeat: no-repeat;
padding-left: 40px;

inside the input field but it just doesn't show up. What's the problem here? I'll happily reply to any possible questions. :)

Harry · Accepted Answer

input:second-child{ "other coding stuff"}
doesn't work to change the other one... What's the problem?

smerny is spot on. There are no second-child pseudo classes in CSS and that is the reason why it doesn't do anything. But you should be careful while using nth-child(2) to select the second button. The reason I say this is because the nth-child(2) pseudo-class selects the second child element under the parent and not the second button element under the parent.

Now you'd ask me what is the difference between the two. The answer is that there is no difference between the two for the HTML provided in the question. So, as you see in the below snippet, the selector works.

input:first-child {
  font-size: 20px;
  font-family: Tunga;
  background-color: rgb(051, 103, 149);
  color: white;
}
input:nth-child(2) {
  font-size: 20px;
  font-family: Tunga;
  background-color: rgb(051, 103, 149);
  color: red;
}

However if your HTML is changed to something like one of the two samples in the below snippet (both of which are not unthinkable) then you'd see that the nth-child(2) does not work (that is, 2nd button is no longer styled). This is because in both these cases the second child element under the parent is not the second button. In one, it is the and in another it is the element.

input:first-child {
  font-size: 20px;
  font-family: Tunga;
  background-color: rgb(051, 103, 149);
  color: white;
}
input:nth-child(2) {
  font-size: 20px;
  font-family: Tunga;
  background-color: rgb(051, 103, 149);
  color: red;
}


  
  

  





  
  Some label

In both the above cases, the last-child selector would select the second button as in both of them the second button is the last child under its parent. But even that selector would not work for all cases because what if there is another element after the second button?. So that is not fool-proof either.

So then what selector is better? The nth-of-type selectors are a better fit (but still not the best, I will come to it in a while) because the select nth element of a specific type under the parent and aren't affected by the presence of other elements. So, as you can see in the first 3 sets in the below snippet, the selector works fine even though there are other elements in between and after the buttons.

input:first-child {
  font-size: 20px;
  font-family: Tunga;
  background-color: rgb(051, 103, 149);
  color: white;
}
input:nth-of-type(2) {
  font-size: 20px;
  font-family: Tunga;
  background-color: rgb(051, 103, 149);
  color: red;
}


  
  

  





  
  Some label
  





  
  
  Some content

If it works and selects the second button then why is it not the best? It is not the best because input elements can be of multiple types but the element type is same for all of them. So the 2nd input may not always be the second button. Refer to the 4th set in the above snippet to see what I mean.

The same set of problems indicated above would be applicable for the first-child selector also.

So, it is better to avoid the nth-child, nth-of-type selectors unless you are trying to select a group of elements based on a specific pattern. Always use the attributes whose value is defined (and will not change) to select elements. The attributes could be id of the element (or) its name (or) class. These selectors will never get affected by a change in the HTML structure (like introduction of extra elements in between or before or after the required element, change in order of the elements etc).

In your case, both the buttons have a unique name and so you can use the [name='value'] selector to safely select each button. If you could add an id to both the buttons then using it (like #id) would be even more safer. Below is a demo with these selectors.

input[name='skicka'] {
  font-size: 20px;
  font-family: Tunga;
  background-color: rgb(051, 103, 149);
  color: white;
}
input[name='skicka2'] {
  font-size: 20px;
  font-family: Tunga;
  background-color: rgb(051, 103, 149);
  color: red;
  box-shadow: 0 0 2px aqua;
  background-image: url('http://lorempixel.com/20/10/nature/1');
  background-position: 10px 8px;
  background-repeat: no-repeat;
  padding-left: 40px;
}


  
  

  





  
  Some label
  





  
  
  Some content

My second question is, how do I place a small "replay"-icon in the far left of the second button?

This is most likely some issue with your image location because as you can see in the above snippet, the code works fine.

Note: This is not an attempt to nitpick or find fault with smerny's comment. I just wanted to show you the best way (in my opinion) to address this problem (especially because you've stated that you have just started with CSS). All information provided in this answer are already present in Stack Overflow but are scattered across multiple topics. Hope you find this answer helpful :)

Target only one of the buttons with CSS

Answers (1)

Related Questions