Renamed .close to .tagit-close #29

Merged
merged 1 commit into from Sep 5, 2011

Conversation

Projects
None yet
3 participants
Contributor

andrusha commented Sep 5, 2011

Due to conflict with facebox or any other plugin which uses a.close for styling a close button.

Owner

aehlke commented Sep 5, 2011

To be honest, that's really a bug in facebox. It should be more restrictive in how it styles things - something like ".facebox a.close"

On Sep 5, 2011, at 10:18 AM, andrusha wrote:

Due to conflict with facebox or any other plugin which uses a.close for styling a close button.

Reply to this email directly or view it on GitHub:
#29

Owner

aehlke commented Sep 5, 2011

Also shouldn't the tag-it CSS take precedence by being more specific than a.close?

@aehlke aehlke added a commit that referenced this pull request Sep 5, 2011

@aehlke aehlke Merge pull request #29 from andrusha/master
Renamed .close to .tagit-close
396745e

@aehlke aehlke merged commit 396745e into aehlke:master Sep 5, 2011

Contributor

andrusha commented Sep 5, 2011

Consider this code:

div#facebox
    div.content
        form
            ul.tagit
                li.tagit-smth
                    a.close
    a.close

#facebox a.close will match both a's and you can make nothing about it. In my opinion, facebox should use namespace for .close class too.

Anyway, thanks for merge.

Owner

aehlke commented Sep 5, 2011

That's true. But doesn't "ul.tagit a.close" take precedence over "#facebox a.close" since the #facebox is further away than the ul.tagit?

On Sep 5, 2011, at 11:09 AM, andrusha wrote:

Consider this code:

div#facebox
div.content
form
ul.tagit
li.tagit-smth
a.close
a.close

#facebox a.close will match both a's and you can make nothing about it. In my opinion, facebox should use namespace for .close class too.

Anyway, thanks for merge.

Reply to this email directly or view it on GitHub:
#29 (comment)

Contributor

andrusha commented Sep 5, 2011

Right, it takes precedence, but it doesn't redefine all styles.

#facebox a.close {
    color: red;
    margin: 100px;
}

ul.tagit a.close {
    color: blue;
}

Will still have a margin.

necolas commented Sep 5, 2011

The facebox selector has a higher specificity. The level of nesting or which element is the further ancestor is irrelevant. Since facebox uses an ID selector, there is nothing you can do override it unless the tagit selector also includes and ID. Namespacing your classnames was a good way to avoid the conflict altogether.

Owner

aehlke commented Sep 5, 2011

Thanks!
On Sep 5, 2011, at 7:01 PM, necolas wrote:

The facebox selector has a higher specificity. The level of nesting or which element is the further ancestor is irrelevant. Since facebox uses an ID selector, there is nothing you can do override it unless the tagit selector also includes and ID. Namespacing your classnames was a good way to avoid the conflict altogether.

Reply to this email directly or view it on GitHub:
#29 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment