Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Ivan Tomicic
Ivan Tomicic
3,873 Points

How to target all links but those who have image inside?

Hello guys...

I have some styles in my css that I would like to apply to ALL links on my site but not on images. To be more clear here is my code:

a { 
    position:relative;
    text-decoration:none;
    color: #55C2B9;
    opacity: 0.2;
}

a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0; 
    background-color: #55C2B9;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s
    ease-in-out 0s;
}

a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

But if link have image inside, hovering over it will show that underline. I can't target with classes as I use wordpress and there will be lots of photos.

Is there any solution?

7 Answers

Shaker Advertising
Shaker Advertising
5,395 Points
Shaker Advertising
Shaker Advertising
5,395 Points

So there is no way as of now to select and elements parent with a pseudo class and JS might seem like overkill to make this happen, but since you're using WP you can filter the output of the images from the WYSIWYG editor to accommodate.

Add the following to your functions.php file

<?php
/ * Attaches a class to linked images' parent anchors */

function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ){
    $classes = 'img'; // separated by spaces, e.g. 'img image-link'

    /* check if there are already classes assigned to the anchor */
    if ( preg_match('/<a.*? class=".*?">/', $html) ) {
        $html = preg_replace('/(<a.*? class=".*?)(".*?>)/', '$1 ' . $classes . '$2', $html);
    } else {
        $html = preg_replace('/(<a.*?)>/', '$1 class="' . $classes . '" >', $html);
    }
    return $html;
}
add_filter('image_send_to_editor','give_linked_images_class',10,8);
?>

Once it's in place you can simply target the links that have class 'img' and over-ride the pseudo styles.

a.img:before{
    content: "";
    display:none;
}
Ivan Tomicic
Ivan Tomicic
3,873 Points

Thanks!

That was awesome. I also have script that will delete width and height of photo, do you know why both of your and mine functions wont work on already posted photos, I need to re add them?

Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

First off, you'll probably want to create an a:hover selector and give it the text-decoration: none; property. You might also need to add a selector for a:hover img.

If that doesn't work, check the final markup of your pages with your browser's developer tools. WordPress will often add a bunch of extra classes to your markup that you may need to target.

Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

I think I misunderstood your question, so you can probably ignore most of this answer.

Ivan Tomicic
Ivan Tomicic
3,873 Points

No problem :)

Adama Sy
Adama Sy
7,076 Points
Adama Sy
Adama Sy
7,076 Points

If you have javascript skill you can use transverse I believe to reach things in your ul . if you unordered list contain anchors you can selecte them and use them as you like.

I just did jquery so I think that approach is the best than using css

Adama Sy
Adama Sy
7,076 Points
Adama Sy
Adama Sy
7,076 Points

For me Jquery is your best result and less code. If you want to write a book of code, try to do it with css

Shaker Advertising
Shaker Advertising
5,395 Points
Shaker Advertising
Shaker Advertising
5,395 Points

Why rely on jQuery when you can filter the output via wordpress in order to handle it with CSS?

Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Maybe I still don't understand your question correctly, but it seems that after you've formatted the rest of your links, you could just add something like this to your css:

 a img:hover {
    border-bottom: 1px solid #ccc;
 }
Adama Sy
Adama Sy
7,076 Points
Adama Sy
Adama Sy
7,076 Points

Hum maybe I don't understand the question then

Shaker Advertising
Shaker Advertising
5,395 Points
Shaker Advertising
Shaker Advertising
5,395 Points

Ivan Tomicic

You can couple the function I have with the function you have all in one filter. You can't filter the output once then filter it again, it needs to be all in one function.

Any reason you are removing the height and width though?