CSS Problem: Sub-Classes Being Overridden

[NickM]

I'm trying to edit a Joomla template that someone else wrote to include some new CSS classes for a page I made, but some of the elements in my new classes get overridden by previous classes.

This is what firebug looks like:
CLICK ME

As you can see, my margin; 0 from the section-people-photo-pic class is crossed out and overridden by the art-article img class (useing firebug to disable that margin: 1em makes everything align properly).

How can I force the margin: 0 for images with the class section-people-photo-pic while maintaining the margin: 1em for images in the rest of the articles?

 

[Pho]

What happens if you use a selector like img.section-people-photo-pic ?

 

[NickM]

Cant test it from here but will try it tomorrow, should I use that as well as putting the class in the <img> tag or instead?
Whats the difference between img.section-people-photo-pic and .section-people-photo-pic img?

 

[Pho]

From what I read after Googling your problem it seems that the more complex your selector, e.g., .section-people-contact-container .section-people-photo-container img.section-people-photo-pic (that may or may not be the right way around!), the more chance it has of not being overridden.

Having the class in the image tag should be fine.

 

[NickM]

Thanks Pho, will have a play around tomorrow.

 

[Mattus]

Whats the difference between img.section-people-photo-pic and .section-people-photo-pic img?

The first one matches an image which has the class 'section-people-photo-pic'.

The second one matches an image which is the child of (i.e. is inside) an element with the class 'section-people-photo-pic'.

The first one should work for you. It's no more specific than img.art-article, but will override it purely because, judging by your screenshot, it's later in the CSS file.

 

[NickM]

Thanks guys, using img.section-people-photo-pic fixed it.