Is the CSS sibling selector affected when combined with descendant selectors?

I'm attempting to style a link that appears only after an image, within separate HTML tags like this:

<p>
  <a href=whatever>
    <img stuff>
  </a>
</p>
<p>
  <a href=something>This text should have a distinct color</a>

This CSS rule "works":

p + p>a {
  color: red;
}

However, it lacks specificity. I would like to achieve something similar to the following code snippet, but it seems to be targeting the sibling of the IMAGE rather than the PARAGRAPH:

p>a>img + p>a {
  color:red
}

The first example works, but it may apply to unintended elements. The second example does not work at all, and perhaps it cannot be accomplished in this way. While I prefer using classes or ids, the project is written in markdown which translates to HTML. As such, my only option is to target elements based on their general structure rather than attributes (unless you have another solution?).

Answer №1

Understanding that browsers interpret CSS selectors from right to left can be beneficial when trying to figure out how your code is targeted. It's important to note that spacing in your selectors does not indicate grouping as CSS ignores spacing.

For example, the selector p + p>a would mean "an anchor inside of a paragraph that is next to another paragraph", when read from right to left.

On the other hand, p>a>img + p>a would translate to "an anchor inside of a paragraph that is next to an image inside of an anchor inside of a paragraph". Not including spaces between selectors and > implies non-existent groupings. This would match as shown below:

<p>
  <a>
    <img/>
    <p>
      <a>THIS IS THE TARGET</a>
    </p>
  </a>
</p>

Even though this structure may seem illogical, it demonstrates how the targeting works. There isn't a way to move back up to a parent element (<) or group selectors like (p>a>img) + (p>a), making it impossible to achieve the selection approach you are looking for in this scenario.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing a nested div structure for web design

Forgive my lack of expertise in web programming, as my knowledge is limited and I struggle with finding the right terms even through online searches. With that said, my question (which may be worded oddly due to my lack of familiarity with the topic) is: ...

Fetching data from MySQL to create statistical analysis

Let's start with the technical setup: Server: Apache/2.2.22 (Debian) Php: 5.4.4-14+deb7u9 MySQL: 5.5.38 This website is utilized by employees to monitor their daily tasks. As I began developing statistic pages in html/php for a monthly summary, ...

What is the best way to smoothly transition in an image that is dynamically set using Angular?

I am using Angular to set a background image for my page, but the current loading behavior is not visually appealing as the image loads from top to bottom. I would like to implement a fade-in effect or load the image from a blurry view to enhance the user ...

What is the best way to make a textview span its layout in an android app?

Is there a way to style text in a TextView layout itself without using any programming? I have about 20 XML files and no activity associated with them. I've tried using tags but it doesn't seem to work. android:text="Lets look how to make < ...

Sticky top navigation bar in Bootstrap 4 followed by a section immediately below

Struggling to achieve a transparent Bootstrap 4 sticky navbar that reveals the background color of the following section on initial load. Once the user scrolls past 50px, I want the navbar to smoothly fade to white. I'm close to getting it right, but ...

Bootstrap navbar partially collapsed with inner items concealed not at the edges

Many discussions have come up regarding partially collapsing Bootstrap navbars, such as: Item1 Item2 Item3 Item4 Item5 Is it possible to achieve the following collapsed format: Item1 Item2 Item3 =menu= Or: =menu= Item3 Item4 Item5 This method ...

Using Javascript to Change the Radio Station Station

I am a beginner in the world of programming and I am attempting to make this feature work. My goal is to give the user the ability to select the radio station they want to listen to. Here is what I have come up with, but unfortunately it is not functioni ...

Ways to activate a javascript function upon the visibility of a button changing

Utilizing a third-party JS and HTML library that I prefer not to update. The HTML contains an "apply all" button, and my goal is to have this button clicked when it is visible. <div class="confirm" ng-show="newFilters.length"> .... <butto ...

Close the space between the image and the Container

Looking at the image, you can view the demo http://jsfiddle.net/yJUH4/8/ Upon observing the picture, a slight gap appears between the image and the Container. The image already has the css property vertical-align:middle. When I increase the height of the ...

Avoid the ability for individuals to interact with the icon embedded within a button

I'm currently working on a website where users need to interact with a button to delete an "Infraction." The button has a basic bootstrap style and includes an icon for the delete action. <button referencedInfraction="<%= i.infractionID %>" ...

Disable a button during an AJAX request

Whenever a button is clicked, the record is saved to the database without refreshing the page using AJAX. I have implemented the AJAX code successfully. Now I need guidance on how to manage the state of the Submit button - enabling/disabling it dynamicall ...

The presence of a display block property within a div contained inside an li element results in extra whitespace

I am presenting the code below: <div class="settingsMenu" style="top: 135px; left: 149px; display: block;"> <ul> <li class="download" onclick="downTemplate('template1')">Download</li> <l ...

The element does not become properly aligned once it reaches the maximum width

My HTML contains an element with the following style: { max-width: 1500px; padding-right: 40px; padding-left: 40px; width: auto; } Everything looks good when the screen is less than 1580px, and the element is centered. However, when the scree ...

Show the style attribute in AngularJS during the process of translating

In the controller file, I have defined: $scope.htmlCompanyFromScope = '<span style=color:red>Micro</span>'; $scope.htmlTagFromScope = "MicroTag"; The *.resx file includes: TranslationValue = "{{htmlCompany}} tag is {{htmlTag}}" W ...

A guide on iterating and accessing Vue data in a loop

I am looking to iterate through my code in order to extract the value of each form input. This is to ultimately display a total score and severity score based on the user's inputs. The total score will count the number of symptoms present (0-3), while ...

Storing client-side data permanently in ASP.Net is a crucial aspect of web development

I am currently working on a project involving a Point of Sale (POS) system using ASP.Net. The web application functions perfectly when the client has access to the internet. However, I am exploring ways to enable the client to use the application offline w ...

Is there a way to keep my fixed footer container from moving while zooming in and out on a webpage

Is there a way to prevent the bottom text from shifting when zoomed in or out on the page? The rest of the content remains stable, but due to using position:absolute for this section to stay at the bottom of another div (content), it causes movement. #con ...

Selenium: Utilizing CSS Selectors

<b> <s> <b>---</b> (1) <b>---</b> (2) </s> </b> <s> <b>---</b> (3) <b>---</b> (4) </s> Is there a way to target specific tags that are children of another ...

What is the proper way to incorporate isset($_POST['id'.$var]) into a loop structure?

I am currently working on a project where I need to create multiple fields for users to comment on. In order to achieve this, I have implemented a while loop that generates the following HTML code for the text inputs: <form name = "replyform" method = ...

Website experiencing issues with image sizing

On my website, in the Current Books section, I have a row of images. To ensure that all the images are the same height, I initially set the height of the HTML book image to 378 using: <img alt="HTML & CSS" height= "378" src="html.jpg"> Using ...