Target the first element within a tree structure using CSS

Trying to target the initial blockquote in an email body with varying formats, such as:

<div class="myclass">
    <br><p></p>
    <div><div> <!--sometimes with less or more div-->
        <blockquote> <!--the specific blockquote I am aiming to select-->
            <div> <div> <br>
                <blockquote>
                    <etc...>
                </blockquote>
            </div> </div>
        </blockquote>
    </div></div>
</div>

The challenge lies in the fact that there can be variations in formatting and multiple div elements before the first blockquote,
so using:

.myclass > div > div > blockquote {}

may not always produce the desired outcome.
Instead of this approach, utilizing:

.myclass blockquote:first-of-type {}

will capture all blockquotes within the content.

To address this issue, the goal is to exclusively select the FIRST blockquote regardless of its placement within the HTML structure.

Answer №1

Is this what you're looking for? It targets the first nested blockquote within the container with the class .myclass, excluding any blockquotes that are children of the first blockquote.

.myclass blockquote:not(blockquote blockquote) {
  background-color: red;
}
<div class="myclass">
  <br>
  <p></p>
  <div>
    <div>
      <!--sometimes less, sometimes more divs-->
      <blockquote>
        <!--the blockquote I want to target-->
        <div>
          <div> <br>
            <blockquote>
            </blockquote>
          </div>
        </div>
      </blockquote>
    </div>
  </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

Guide to dynamically implementing pagination through AJAX calls

In this javascript code snippet, I have a class named PurchaseHistory. var baseUrl = null; var parameters = null; var currentPageNumber = null; var TotalPages = null; var PageSize = null; $(document).ready(function () { baseUrl = "http://localhost/AP ...

Using HTML5 to display the {{data}} extracted from a JSON file right in the center of the text

Can someone help me with a question about working with html and angular5? <span [innerHTML]="'client.acceptance.explanation'| translate"></span> <span><b>{{data}}</b></span> I have text stored in a json file ...

What causes jquery height and javascript height to both be returned as 0?

I'm facing an issue with a visible div on my screen - despite being visible, its height always returns as 0. I've attempted various jQuery and JavaScript methods to retrieve the height, but it consistently shows as 0. Here's the structure of ...

The Flask server push appears to be functioning correctly, yet the EventSource.onmessage event is not triggering as expected

My implementation includes a route /stream that is designed to push the string 'test' every second. Upon accessing this URL (localhost:12346/stream) on Chrome, I observed that it opens a blank page and adds "test" to the page every second. This ...

What steps can I take to prevent already selected options from being chosen in a Vue.js HTML form?

Among my json data, I have a list of all inventories: { "status": true, "data": [ { "inv_id": 1, "name": "Arts" }, { "inv_id": 2, "name": "web" }, { "inv_id": 3, "name": "mobileapp" }, { "inv_id": 4, "name": "ws" }, { "inv_id": 5, ...

Toggle a jQuery bar based on the presence of a specific CSS class

I am working on a feature where I can select and deselect images by clicking on a delete button. When an image is selected, a bar appears at the top. If I click the same delete button again, the image should be deselected and the bar should disappear. This ...

PHP - Truncated html string when appending

I have a situation where I am using PHP to generate HTML for the MPDF library in order to create a PDF file. However, when I include a loop within my PHP-generated HTML, it seems to be cutting off the initial part of the string. Below is the code snippet: ...

Guide to populating a dropdown list using an array in TypeScript

I'm working on a project where I have a dropdown menu in my HTML file and an array of objects in my TypeScript file that I am fetching from an API. What is the best approach for populating the dropdown with the data from the array? ...

Retrieve the data stored in the HTML input field prior to transferring it to the SQL database

Currently, I have a form where users input latitude and longitude coordinates, which are then used to create markers and send them to the MySQL database. However, I would like to update it so that users can input an address instead. I attempted to use the ...

variable containing a combination of left-to-right and right-to-left characters

I am working on a piece of text which contains Hebrew (rtl) and English (ltr) letters. It is a song with chords placed above the words. The issue I am facing has to do with the chords - because the site is rtl, the chords appear messy. Is there a way to h ...

Activate the horizontal scrollbar within each flex item when it is stretched beyond its original width

My goal is to have both the child-1 (blue) and child-2 (black) retain their original width when the sidebar appears by enabling horizontal scrolling upon clicking anywhere in the demo below. document.body.onclick = () => document.querySelector(&apos ...

Tips for entering the lowest and highest values into the input field

I am looking to track the daily minimum and maximum prices of shares for various companies. Currently, I'm attempting to utilize this tag: <input type="number" name="number" placeholder="minprice"> <input type="number" name="number" place ...

Sliding Feature

Can someone assist me with implementing a jQuery half slide function from left to right? Please check out the following URL for more information: http://jsfiddle.net/prabunivas/Fy9Hs/2/ <div> <div id="col1" style="float:left"> &l ...

<datalist> trigger that occurs when a selection is made

I'm currently working on a feature that resembles autocomplete, and instead of creating my own dropdown, I have decided to experiment with the use of < datalist >. I appreciate using native elements as they are compatible across various devices, ...

Where is the best place to insert Javascript code in an HTML file - the head or body section?

I am currently developing a search engine and have implemented code to automatically redirect users from HTTP to HTTPS when they visit my site. The only question I have is whether I should place this code in the head or body section of my webpage. if(wind ...

Is there a way to use flexbox in a grid to center only a specific tab from MUI?

I am working with an array of tabs and encountering a layout issue. The tabs need to share the available space when there's more than one tab, but when there's only one tab, it should be positioned in the middle of the column. How can I address t ...

Stop unauthorized pages from hijacking login cookies

I have a website called where users can create their own HTML pages accessible through the link if the username is "USR" and project is "PROJECT". However, there is a security concern... Currently, I store users' login tokens as cookies. But what ...

Creating customized placeholders using CSS padding in HTML5

I came across this helpful post and attempted various methods to adjust the padding for my placeholder text, but unfortunately, it seems unwilling to cooperate. Below is the CSS code. (EDIT: This CSS was generated from SASS) #search { margin-top: 1px; ...

In order to check a checkbox, you need to ensure that the scrolling div has been scrolled to the very

I have a situation where I need to ensure that a user has scrolled to the bottom of a disclaimer before they can acknowledge it by checking a checkbox. Our legal department requires this extra step for compliance reasons. Here is an example of how the mark ...

Executing a cross-site scripting (XSS) simulation within a MVC4 application on Visual Studio 201

Within my MVC 4 application, I am experimenting with simulating an XSS attack. The setup involves a button and a text box that simply outputs the entered value. However, when I input <script>alert('xss')</script> into the text box, an ...