Can't figure out what's wrong with my syntax - html

Question

as you can see here http://jsfiddle.net/Ec8kN/ , my css circles are not working properly. Initially I only had one class .circle that I used several times to have multiple circles and it was working fine. I then decided to name each circle differently (i.e. circle-1, circle-2, circle-3) to get a better control with JS at a later stage.
That's where the issues started. Now that I renamed them circle-1, circle-2, etc they won't display correctly anymore. What could be the issue? Many thanks
<div class="circle-1 circlebackground circle_5px_marging">
<p>Créativité</p>
<div class="innercircle">
<p>Le fdfd stimule la dfdsfd du fdfds en le dfdfd à réinventer sa dfdsf de la dfds dfs et donc les fdsfs qu’il peut y fdssf.</p>
</div>
</div>
<div class="circle-2 circlebackground circle_5px_marging">
<p>Circle 2</p>
<div class="innercircle">
<p>by Angela</p>
</div>
</div>
<div class="circle-3 circlebackground">
<p>Circle 3</p>
<div class="innercircle">
<p>by Angela</p>
</div>
</div>
.circle_5px_marging {
margin-right: 30px;
}
.circle-1, .circle-2, .circle-3 {
position: relative;
float: left;
margin-bottom: 10px;
width: 220px;
height: 220px;
border-radius: 50%;
box-shadow: inset 0 0 0 0px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.circlebackground {
border:1px solid #2970AE;
background: #FFF;
}
.innercircle {
position: absolute;
width: inherit;
height: inherit;
border-radius: 50%;
background: #2970AE;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
.circle-1, .circle-2, .circle-3 p {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
color: #2970AE;
letter-spacing: 1px;
font-weight: 700;
font-size: 14px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.innercircle p {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
color:#fff;
text-align: center;
font-weight: 300;
font-size: 10px;
opacity: 1;
-webkit-transition: all 1s ease-in-out 0.4s;
-moz-transition: all 1s ease-in-out 0.4s;
-ms-transition: all 1s ease-in-out 0.4s;
-o-transition: all 1s ease-in-out 0.4s;
transition: all 1s ease-in-out 0.4s;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.circle-1:hover {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.circle-1:hover .innercircle {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.circle-1:hover .innercircle p {
opacity: 1;
}
.clear {
clear: both;
}

Answer 1

Change .circle-1, .circle-2, .circle-3 p to .circle-1 p, .circle-2 p, .circle-3 p. It should work.
As it is now, the properties set under this rule will apply to elements with class as circle-1, circle-2 and the p tag under all elements with class as circle-3.
Fiddle Demo

Answer 2

You need to fix one selector:
.circle-1 p, .circle-2 p, .circle-3 p
Instead of:
.circle-1, .circle-2, .circle-3 p
Like I've written on the previous question of yours, the current selector is applied on .circle-1, .circle-2, and all paragraphs inside .circle-3. If you want it to be applied on every paragraph inside those classes you have to address p on each class separately.
jsFiddle Demo

Answer 3

I can only advise you to restore the common circle class, then add a different id to each circle (e.g. id="circle1") and use the # CSS operator (e.g. #circle1) to customize each circle. That way you can tidy up your CSS code a little bit. For example, your first circle:
<div id="circle-1" class="circle circlebackground circle_5px_marging">
<p>Créativité</p>
<div class="innercircle">
<p>Le fdfd stimule la dfdsfd du fdfds en le dfdfd à réinventer sa dfdsf de la dfds dfs et donc les fdsfs qu’il peut y fdssf.</p>
</div>
Look here.

Answer 4

Going back to one css class for your circles is the way to go. If you need to distinguish them in Javascript then add an id to each circle.
From W3 Schools: The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.
Furthermore accessing Ids in Javascript is easier and faster than accessing classes. Even though frameworks make it easy and browser are pretty fast nowadays.

Answer 5

I have found the problem.
There is no syntax error but the Circle 1 you have gets overlapped by Circle-2 which you can see by hiding circle 2.
So you just need to change the position of the circle 2.