CODEWITHSUNDEEP
csscss-selectors
rocket
rocket

Reputation: 1

Excluding a particular style

I have defined a style for all images:

img {
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
}

I would like to style another set of images differently. I have created a class for them:

.radius {
    border-radius: 10px;
}

However, it does not seem to change the targeted images. As I understood it, a class selector has a higher priority than an element selector. Any suggestions where I am going wrong?

Upvotes: 0

Views: 46

Answers (1)

Antonello Pasella
Antonello Pasella

Reputation: 257

Have al look at http://www.w3.org/TR/css3-selectors/#specificity

A selector's specificity is calculated as follows:

- count the number of ID selectors in the selector (= a)
- count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
- count the number of type selectors and pseudo-elements in the selector (= c)
- ignore the universal selector

For example you can increment your specificity by using tag + class

img.radius {
     border-radius: 10px;
}

Here a good article from SM

Upvotes: 1

Related Questions