Question

I am creating a File Drop Effect where when a file is dragged the border color should change.

#upload-photo {
    height: 150px;
    text-align: center;
    line-height: 150px;
    font-size: 18px;
    border-radius: 3px 3px 3px 3px;
    border-style: dashed;
    border:4px dashed #c0c0c0;
}
.upload-photo-border {
    border:4px solid #999;
}

HTML Code:

<div id="upload-photo">Drop photo here to upload.</div>

jQuery Code

.............
    dragOver: function() {
        // user dragging files over #dropzone
                $("#upload-photo").addClass("upload-photo-border");
                $('#upload-photo').css('width', '100px');
    },
..........

The Border Color still wont change on adding the required class. Not sure if am doing something wrong.

Answer 1

This is an issue with specificity. Make your class selector more specific. For example:

#upload-photo.upload-photo-border{
    border:4px solid #999;
}

As a general rule, remember that ID selectors are more specific than class selectors, which are in turn more specific than tag name selectors.

Additionally, the more parts present in your selector, the more specific it becomes.