Focus on the child if the parent has a specific sibling

Unfortunately, I don't have control over the markup structure but this is how it appears when rendered.

<div class="div1">

  <div class="div2">
    <p>Please do not choose me</p>
  </div>

</div>


<div class="div1">
    <strong> 
    <p>Do not pick me </p>
    </strong>
   <div class="div2">
    <p>Select only with CSS </p>
   </div>
</div>

I am interested in selecting the p tag within div2, but only if div1 has a sibling containing a strong element.

Is this functionality achievable?

UPDATE: I made a mistake in my previous statement.

htmlcsscss-selectors

Answer №1

Implement the adjacent sibling selector +:

.first-div strong+.second-div p {
  background: tomato;
}
<div class="first-div">
  <div class="second-div">
    <p>Do not select me</p>
  </div>
</div>
<div class="first-div">
  <strong> 
    <p>Do not select me</p>
  </strong>
  <div class="second-div">
    <p>Select me only using CSS</p>
  </div>
</div>

Answer №2

Choose a p element that is nested within .div2 and positioned next to a strong element:

strong ~ .div2 > p {
  color: red;
}
<div class="div1">
  <div class="div2">
    <p>Do not select me</p>
  </div>
</div>

<div class="div1">
  <strong> 
    <p>Do not select me </p>
    </strong>
  <div class="div2">
    <p>Only select me using css </p>
  </div>
</div>

Answer №3

To implement this style, make use of the general sibling combinator ~

.div1 strong ~ .div2 p {
  color: red;
  font-weight: bold;
}
<div class="div1">

  <div class="div2">
    <p>This text will not be selected</p>
  </div>

</div>


<div class="div1">
  <strong> 
    <p>This text will not be selected too </p>
  </strong>
  <div class="div2">
    <p>Only select this text with css </p>
  </div>
</div>

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

What is the best way to adjust the size of an image using CSS, especially with flexbox

I'm attempting to arrange 3 images in a row using flexbox. I also need to adjust the size of the first image because it is too large. However, my CSS styles are not being applied correctly. Each image is enclosed in its own div with a class of flex-it ...

htmlcssflexbox

Nested looping in ReactJS using the map method of JavaScript

I'm experiencing an issue with nested mapping in my project, as I keep getting an undefined error. Currently, I am passing the profile props to the Link router in navbar.jsx like this: profile: this.state.profile. Then, I fetch the data in profilePag ...

javascripthtmlreactjs

When attempting to access the submenu in Bootstrap 5 dropdown, it does not slide down as expected upon clicking

Why isn't the rest of the menu expanding downward when I select a submenu? The submenu is already selected, but it hides other items. How can I make it expand downwards? <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

htmlcssdrop-down-menubootstrap-5

Learn the process of exporting a table with a header to Excel using the table2excel function

I've encountered an issue with exporting a datatable powered by jQuery DataTables to Excel using table2excel. While I am able to export the data, I'm unable to include the table headings in the exported file. Here is the code snippet: $('# ...

javascriptjqueryhtmlexceldatatables

What are some ways to enhance the speed of swipe and scrolling on mobile devices using Javascript, CSS, and HTML?

Dealing with slow scrolling on iPhones has been a challenge for me. The application was developed using Vue.js. I was able to increase the scrolling speed on desktop using Javascript, but unfortunately, it doesn't translate well to mobile devices due ...

javascripthtmlcssvue.js

I am looking to display the pop-up exclusively when the page is clicked, but unfortunately it is also appearing when the Menu is clicked

I've been working on this code and trying to make some modifications, but I just can't seem to find the right solution for my issue <!-- Updated main content --> <main> <p> Click on the menu button located in the top right ...

javascripthtmljquery

Get both div tags within a single find_all function call in Beautiful Soup

Is there a way to extract multiple HTML div tags using a single "soup.find_all" function in beautifulSoup? The divs are labeled as "event odd" and "event even" on the webpage, and I want to iterate through all of them. Here is an example of the webpage co ...

pythonhtmlbeautifulsoup

Selenium mistakenly chooses the incorrect element by selecting the first sibling element instead of searching within the element itself

I've been trying to loop through a list of elements and display the text, but I've encountered a strange issue with Selenium. When I select an element inside another element, Selenium returns the element inside the first sibling element instead o ...

pythonhtmlseleniumselenium-webdriverweb-scraping

Tips for aligning icons and text vertically in React applications

Link to code sandbox demo https://i.sstatic.net/vjGAd.png <span> { item.result.map((item, idx) => { return <span className="legend-label"> <StopIcon />{item.metric}: {item.count}</span> ...

cssreactjs

What is the best way to horizontally scroll to a selected item within a scrollable div using React?

I'm working on a project that involves creating a horizontal scrollable list. The goal is to have the list automatically scroll to the selected item, centering it in the view. While attempting to implement this feature using React, I've encounte ...

javascriptcssreactjs

The onClick event in HostListener is intermittent in its functionality

While attempting to create a dropdown box in Angular by following these examples, I am encountering inconsistent results. Below is the code I have used: HTML <button (click)="eqLocationDrop()" id="eqLocButton"><i class="fas fa-caret-down">< ...

htmlangulartypescript

Functioning properly with WAMP, but encountering issues with LAMP

$(document).ready(function(){ $("#voiceMail").click(function(){ if(realStatus == 'Registered.') { var username=window.frames["iframeIphone"].username.value;//--There seems to be some problem here. $(".display").load("Images/Working. ...

phpjqueryhtmlajax

Bootstrap: nav-link remains visible even after a dropdown-item is chosen

I am aiming to accomplish the following - when a dropdown-item from the navbar is selected, I want to execute BOTH of the following actions: Scroll to the div with the specified target id Collapse the navbar back to its initial state (fully rolled up, hi ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Discovering multiple classes in a CSS file can be achieved by using specific selectors and searching

I am attempting to phrase my question differently: As mentioned in a book: "multiple classes: p.testorosso.grassetto {color: red; font-weight: bold;} This rule will apply the specified styles to all elements that contain the names of the defined classes ...

css

Regular Expressions in action - Substituting text within an eZ Publish XML field

Before utilizing the eZ Publish 5 API to create an Xml content, I need to make some modifications. I am currently working on implementing a Regex to edit the content. Below is the Xml code I have (with html entities) : View Xml code here http://img15.ho ...

phphtmlregexxmlezpublish

Printing from a lengthy React DOM using window.print only generates a single page

My React component is capable of rendering markdown and can span multiple pages. Everything looks great when the component is displayed in the browser - scrolling works perfectly. However, whenever I try to print the page using window.print or ctrl + P, ...

cssreactjstypescriptreact-dom

Is there a way to adjust my navbar's height depending on the presence of a focused link?

Currently, I am utilizing React and JavaScript for styling on my website. One feature I have implemented is a skip link in the navigation bar that allows users to jump further down the page with a simple click. The challenge I'm facing is that this sk ...

javascriptcssreactjsjsx

The animation in Material UI does not smoothly transition with the webkit scrollbar

I've been experimenting with CSS animations in Material UI's sx property to achieve a webkit scrollbar that eases in and out. However, instead of the desired effect, the scrollbar appears and disappears instantly. Whether I define the keyframes ...

javascriptcssreactjsmaterial-uifrontend

Failure to prepare mySQLi statement due to multiple question marks being used in the form

Hello, I am currently working on implementing a multi field search feature. The form consists of four fields and the user has the flexibility to input information into one or more fields for querying the database. While the SQL query functions correctly i ...

phphtmlmysqlsqlmysqli

I'm experiencing an issue with my JavaScript code not producing the expected HTML output

This is the HTML code snippet: <body> <p>Below the input bubbles the numbers from 1 - 100 will be printed. Any number that is a multiple of Fizz will have "Fizz" displayed instead of the number, and the same goes for Buzz. If a number is a ...

javascripthtml