View Full Version : changing color of first and last child elements

Jun 19th, 2016, 08:42 PM
Hello, I am just about a day into coding with html and css for the first time ever and it's been quite a challenge.

It all started with wanting to make a 3 position radio button which was not all that hard, but then I was sucked down the rabbit hole as I attempted to use CSS to change it's style.

I tried to use different colors for the 1st and last child only when they get selected. The first-child was to be blue and the last red.

I was able to get the 1st radio button set to blue when selected, but for the life of me I can't get the "last-child" to work.

Please be kind after seeing my first shot at codding as I am sure it has problems all the way through it.


Jun 19th, 2016, 10:40 PM
Hi there new2css,

and a warm welcome to these forums. ;)

As the inputs each have an "id attribute" we can use them.

Here is the corrected and validated code....

<!DOCTYPE html>
<html lang="en">

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
#switch {
display: inline-block;
border: 0.06em solid #000;
border-radius: 0.25em;
background-color: #fff;
#switch input {
display: none;
#switch label {
float: left;
width: 2em;
padding: 0.1em;
border: 0.06em solid #ccc;
border-radius: 0.25em;
text-align: center;
cursor: pointer;
#o2 +label {
width: 4.5em;
#switch input:checked + label {
border-color: #000;
color: #fff;
#o1:checked + label { background: #00f; }
#o2:checked + label { background: #f16e22; }
#o3:checked + label { background: #f00; }


<div id="switch">
<input name="r1" type="radio" value="01" id="o1" checked>
<label for="o1">1st</label>

<input name="r1" type="radio" value="02" id="o2">
<label for="o2">Middle</label>

<input name="r1" type="radio" value="03" id="o3">
<label for="o3">3rd</label>



Jun 20th, 2016, 10:05 AM
You can change color with css code
:last-child {
css declarations;

Jun 20th, 2016, 12:33 PM
Hi New, and welcome... If I were you I would try to master the "plain" classes first and get familiar with the basics in general before you move on to pseudo classes. Here is a series that helped me a lot: https://www.youtube.com/watch?v=Nej7B5M-vOM&list=PLMve8qV_h5E-jiumev7IX13RkItNUy_ba


Jun 20th, 2016, 11:43 PM

Thanks for the welcome to the site and the code. I download your example and it worked perfectly. Of course once you get something working you keep wishing for more. If I wanted to have multiple sets of these CSS custom radio buttons, would I need to repeat the 3 lines of code for each new copy of the radio button I put on my web-page?

Jun 20th, 2016, 11:49 PM
Hey smtp, thanks for the reply. I tried and tried to get the :last-child to work but it failed every time. I was able to get the first-child to work without problem. I sort of got the feeling that for whatever reason it was not considering the 'last child' as the true last child. I tried using first and last child in with standard radio button and it worked, but as soon as I came back to apply the same exact code to my CSS radio button code it failed. I haven't a clue as to why.

Jun 20th, 2016, 11:58 PM
WAINGRO thanks for the welcome, and I could use some background info as I pretty much have just jumped in with both feet. I sort of understand the classes, both basic and pseudo classes in there vanilla form. What tends to get me all twisted around is when classes are combined, if that's even the proper terminology, with the + ^ ~ $ and all of the other symbols.

In one example I saw things like this:

.switch input[=radio]:checked + label + input + label

After seeing this I went to bed!

classes first and get familiar with the basics in general before you move on to pseudo classes

Jun 21st, 2016, 12:01 AM
oops disregard the last line in the previous message.

Hey is there a way to edit a reply?