Sat, 2014-10-25 04:49
Given the following code :
<section id="ourteam"> <div class="container"> <div class="margin-top-50"></div> <div class="row"> <div class="col-md-12 text-center"> <h1 class="banner h-ourteam">Meet Our Team</h1> </div> </div> <!-- end of row --> </div> <!-- end container --> <div class="margin-bottom-50"></div> <div class="container"> <div class="well"> <div class="margin-top-50"></div> <div class="row"> <div class="col-md-offset-1 col-md-10"> <img src="img/team/Lata.jpg" class="pull-left me img-responsive img-circle img-shadow"> <h1> Lorium Ipsum</h1> <small> Lorium Ipsum</small> <p>Lata is a very knowledgeable teacher and she gives a lot of freedom to the teachers to experiment with teaching methods. She is approachable to the teachers whenever they need advice from her. A very simple, down to earth, sincere, hardworking and focused person. A good mentor who always motivates others to reach their potential and guides you when you need help.</p> </div> </div> <div class="row"> <div class="col-md-offset-1 col-md-10"> <img src="img/team/ Lorium Ipsum.jpg" class="pull-right me img-responsive img-circle img-shadow"> <h1> Lorium Ipsum Trikannad </h1> <small> Lorium Ipsum</small> <p> Lorium Ipsum is teacher who has lots of patience with the kids. She is a very meticulous person and does her work diligently is a very charming, charismatic, patient and composed person. Someone you can count on and rely on for the right kind of advice.</p> </div> </div> <div class="row"> <div class="col-md-offset-1 col-md-10"> <img src="img/team/Kusuma.jpg" class="pull-left me img-responsive img-circle img-shadow"> <h1> Lorium Ipsum</h1> <small> Lorium Ipsum</small> <p> Lorium Ipsum is a very Sweet, Affectionate person. She is very patient and sincere. Very efficient in her work and is definitely a pillar of strength at Phoenix Kids. Somebody you can bank on.</p> </div> </div> <div class="row"> <div class="col-md-offset-1 col-md-10"> <img src="img/team/Joshna.jpg" class="pull-right me img-responsive img-circle img-shadow"> <h1>Sudeshna </h1> <small> Lorium Ipsum</small> <p>is completely dedicated and full of life! Joshna has lots of energy and she is a very sincere, hardworking and a dedicated teacher. She is very creative as well.</p> </div> </div> <div class="margin-top-50"></div> <div class="row text-center"> <div class="col-md-12"> <a class="back-button" href="team.html"> <span >Meet Our team</span> </a> </div> </div> <!-- end of row --> <div class="margin-bottom-50"></div> </div> <!-- end of well --> <div class="margin-bottom-50"></div> </div> <!-- end of container --> </section>
why does the following css rule apply :
#ourteam .img-shadow{ -webkit-box-shadow: inset 0 -1px 5px 1px hsla(0, 0%, 0%, 0.5); box-shadow: inset 0 -1px 5px 1px hsla(0, 0%, 0%, 0.5); padding: 5px 0; margin: 0 25px; }
but this does't :
#ourteam > .img-shadow{ -webkit-box-shadow: inset 0 -1px 5px 1px hsla(0, 0%, 0%, 0.5); box-shadow: inset 0 -1px 5px 1px hsla(0, 0%, 0%, 0.5); padding: 5px 0; margin: 0 25px; }
????
Sat, 2014-10-25 16:31
#1
Not a child element
I saw no instance where .img-shadow was a child of #ourteam. The child is a specific case of descendent.
I also saw no instance of sanity in the choice of class tokens. This appears to be an example taken from some grid based system. Don't go there; it is stupidity in action. Seriously.
cheers,
gary
Mon, 2014-10-27 06:16
#2
gary LOL
but thanks !