Specificity exercise

by certainlyakey

HTML

<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<div id="drop-container">
    <figure><img alt="100" src="http://podojdi.ru/resources/tests/study/css_specificity/shepherd.jpg"><figcaption>Id</figcaption></figure>
    <img alt="10" src="http://podojdi.ru/resources/tests/study/css_specificity/dog.jpg"><figcaption>Class и псевдоклассы</figcaption></figure>
<figcaption><img alt="1" src="http://podojdi.ru/resources/tests/study/css_specificity/sheep.jpg"><figcaption>Элементы и псевдоэлементы</figcaption>
</div>

 
<div class="drophere" id="115">
    <div></div>
    <p><code>div#menus ul.odezhda li a:before</code> = <span>0</span></p>
</div>
<div class="drophere" id="125">
    <div></div>
    <p><code>nav.ui-dropdown ul li a.tool span#popular</code> = <span>0</span></p>
</div>
<div class="drophere" id="122">
    <div></div>
    <p><code>#content .b-news_digest .lastnews h5:first-line</code> = <span>0</span></p>
</div>

CSS

body {font-family:Arial, Helvetica, sans-serif}
#drop-container {  width: 200px; height:100%; border-right:1px solid black; position:fixed; z-index:2; background:white;text-align:center}
.drophere { width: 70%; height:100px; border:1px black dashed; font:36px Arial, Helvetica, sans-serif; padding:1em; position:relative; margin-bottom:8px; margin-left:208px}
.drophere p {position:absolute; bottom:4px; left:4px}
.drophere img {width:auto; height:80px; margin:0 4px}
.dropHover {background-color:#ccc}

JavaScript

$(function() {

        $( "#drop-container img" ).draggable({
            revert: 'invalid', 
            helper: "clone"
        });
    $( ".drophere" ).droppable({
        hoverClass: 'dropHover',
                accept : '#drop-container img',
                drop : function(event, ui) {
                        $(this).find('div').append(ui.draggable.clone());
  var className = ui.draggable.prop("alt");
  var currentValue =$(this).find('span').text();
$(this).find('span').text(parseInt(currentValue)+parseInt(className)); 
var sum = $(this).find('span').text();
                    if (parseInt(sum)==parseInt($(this).prop('id'))) {
                        alert('Ура! Специфичность селектора вычислена правильно');
                    $(this).css('background-color','lime')
                    }                    
                }
        });
    });