How can you style all anchor tags except for those that include images, without modifying the image tag with any additional class or id attributes

Question

How can you style all anchor tags except for those that include images, without modifying the image tag with any additional class or id attributes

I am faced with a challenge where I need to apply padding and background-color properties to text anchors, but exclude these styles from anchors that contain images. Take a look at the example below:

<p>
  <a href="#">this is a text link that needs to be styled</a>
  <a href="#"><img src="image/name.jpg" alt="this needs to be excluded from styling" /></a>
</p>

My goal is to have red background and padding on text links only, without affecting linked images. The challenge lies in the fact that I cannot add classes or IDs to image tags.

So, how can I effectively style all anchors with CSS attributes, while ensuring that anchors containing images are not affected by these styles?

html css

Answer 1

Answer №1

Employing JQuery to change the background color:

$(function() {
    $('a:not(:has(img))').css('background-color','red');
});

Answer 2

Employing JQuery to change the background color:

$(function() {
    $('a:not(:has(img))').css('background-color','red');
});

Answer 3

Answer №2

At this time, it is not possible to directly target the parent of a selected child element using CSS alone. The workaround for this limitation would be to utilize JavaScript.

However, if your webpage background is of a solid color, an alternative approach could involve employing negative margins along with backgrounds on your img elements to overlay backgrounds set on your a elements… For a demonstration, you can refer to this example: Click here. I have tested this method in Safari, Firefox, and MSIE8, and it appears to function as expected.


a {
   display: inline;
   padding:10px;
   background:red;
}

a img {
   border: none;
   vertical-align: bottom;
   margin:-10px;
   padding: 0px;
   background:white;
}

Answer 4

At this time, it is not possible to directly target the parent of a selected child element using CSS alone. The workaround for this limitation would be to utilize JavaScript.

However, if your webpage background is of a solid color, an alternative approach could involve employing negative margins along with backgrounds on your img elements to overlay backgrounds set on your a elements… For a demonstration, you can refer to this example: Click here. I have tested this method in Safari, Firefox, and MSIE8, and it appears to function as expected.


a {
   display: inline;
   padding:10px;
   background:red;
}

a img {
   border: none;
   vertical-align: bottom;
   margin:-10px;
   padding: 0px;
   background:white;
}

How can you style all anchor tags except for those that include images, without modifying the image tag with any additional class or id attributes

Answer №1

Answer №2

Similar questions

Issue with iframe's size not displaying correctly

Discrepancy in Line Spacing in Internet Explorer 9 when Working with TextAreas

Having trouble triggering the onclick event on a dynamically created table using JavaScript

Is it possible to activate the identical drop-down or popover with multiple buttons?

Convert HTML Rich Text to Plain Text using a TextArea component

Transitioning between pages causes a delay in loading the background

When the text exceeds its container, the CSS property overflow will display only the

Storing Date Input in a Database Using PHP and mySQL

Arranging divs on a webpage

What is the best way to design my PDF with a complete background?

Changing the style of characters within a contenteditable element

Information is not getting submitted through the HTML form

How can you apply color to {{expression}} text using AngularJS while also keeping all the text on a single line?

Adding text on top of an image

Efficiently loading images in Angular7 with lazy loading

Can you explain the concept of collapse as it pertains to bootstrap?

Is there a way to extract the "validade" value from the array and retrieve it exclusively?

Adjust the image to stretch and crop appropriately to perfectly fit the specified dimensions

Trouble getting BS4 find_all to recognize the mini_card-title class on Genius Lyrics website

How can I effectively make properties accessible in my template to facilitate form validation in Angular?