1

In this article: CSS targeting specific images, Nils Munch explained how to 'hooks' specifid images by CSS, here an example:

img[width="400"]{
float:left;
}

It's working perfectly for me, i also hooked classes:

img.forum-icon {
background: #ffffff;
padding: 4px;
border: 1px solid #ddd;
border-radius: 3px;
}

But now i found an image 'un-hookable' because has not specified size, has not a class... I should not hook all images on the theme like with this:

.img {
background: #ffffff;
padding: 4px;
border: 1px solid #ddd;
border-radius: 3px;
}

There is a way to hook as for example with the programming 'and' functions? as for example:

If is 400px and not class x then

Or better all images less specified class or sizes:

.img (but not x class or not x width){
background: #ffffff;
padding: 4px;
border: 1px solid #ddd;
border-radius: 3px;
}

EDIT: Thank you all, i found useful this:

img:not([src="http://www.love4wellness.it/wp-content/uploads/2014/03/logo.png"]) {
    background: #ffffff;
padding: 4px;
border: 1px solid #ddd;
border-radius: 3px;
}

To close this request i need if there is a way to add multiple images to my filter, as for example:

img:not([src=image1], [src=image2], [src=image3]) {
    background: #ffffff;
padding: 4px;
border: 1px solid #ddd;
border-radius: 3px;
}

I tried several ways but not working...

Other, unfotunately i had to add too many picture to the filter (if it's possible to add more than one) also add to thumbnails too... really a har work for a shop online website..

My new question shold be more simple:

I want to customize only images posted in BuddyPress pages... this is the page of example: http://www.love4wellness.it/groups/benvenuto/

As you see the img of the first thread have not border, and have no hooks like class and/or custom css file to edit... There is a way to make it hookable?

Thanks a lot for you patience...

Community
  • 1
  • 1
Stefano Camaiani
  • 7
  • 2

3 Answers3

1

Solution 1:

Keep things simple. Suppose you want to add a red border to anonymous images, you can write:

/* add red border to all images */
img { border: 1px solid red; }
/* remove border if image has class or width attribute */
img[class], img[width] { border: none; }

Solution 2:

Use CSS3 :not pseudo-class:

/* if is 400px and not class x then */
img[width="400"]:not(.someclass) { }
/* not x class or not x width */
img:not(.someclass), img:not([width="400"]) { }

Note:

  • The :not selector accepts a simple selector so :not(.foo, .bar) will not work but :not(.foo):not(.bar) will.
  • If the images to exclude have something common inside the src attribute you can target (or exclude them) like [src*="/some/path/"].
Salman A
  • 262,204
  • 82
  • 430
  • 521
0

If organise your declarations in order, then they will be overwritten/applied only if the condition is met

// standard img with no class of width hook
.img {
background: #ffffff;
padding: 4px;
border: 1px solid #ddd;
border-radius: 3px;
}

// applied to the above styles, to images with this hook.
img[width="400"]{
float:left;
}

// applied to all the above styles, to images with this hook.
img.forum-icon {
background: #ffffff;
padding: 4px;
border: 1px solid #ddd;
border-radius: 3px;
}
Kevin Lynch
  • 24,427
  • 3
  • 36
  • 37
-1

SOLVED:

I directly hooked the container:

.activity-content img{
background: #ffffff;
padding: 4px;
border: 1px solid #ddd;
border-radius: 3px;
}

Thanks to all

Stefano Camaiani
  • 7
  • 2