Selection of child elements using CSS selectors

I have the following HTML snippet and I want to target the second child with the class name "embed":

<div class="embed-container">test</div>

This is what I tried:

.feature-row .threecolumns .caption:nth-child(2) {
    border: 1px solid red;
}  
<div class="col-md-12 relative feature-row" >
    <div class="threecolumns">
        <div class="caption caption-feature-block relative"  >
            <div class="col-md-12 col-xs-12">
                <h4 >The Heart </h4>
                <p >We asked  ?"</p>
                <div class="embed-container"></div>
            </div>
        </div>
        <div class="caption caption-feature-block relative " >
            <div class="col-md-12 col-xs-12">
                <h4 >See You Tomorrow</h4>
                <p > takes top priority at A.</p>
                <div class="embed-container">test</div>
            </div>
        </div>
        <div class="caption caption-feature-block relative c" >
            <div class="col-md-12 col-xs-12">
                <h4 >h4</h4>
                <p > A .</p>
                <div class="embed-container">embed2</div>
            </div>
        </div>
    </div>
</div>

Is there a way to achieve this without assigning an ID to the div?

Answer №1

Great job on your code implementation. To target the child .embed-container, you should utilize the following selector:

.feature-row .threecolumns .caption:nth-child(2) .embed-container

The solution is effective: http://jsfiddle.net/jraef1cu/10

Answer №2

You forgot to include the class name following :nth-child in your CSS selector. Additionally, ensure all DIVs are properly closed.

.feature-row .threecolumns .caption:nth-child(2) .embed-container {
        border:1px solid red;
} 

http://jsfiddle.net/abc123def/22/

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

The HTML <select> element is currently styled with a locked CSS, but I am looking to have it displayed with the default

Unfortunately, I am unable to make changes to the CSS file at this time. The current styles in the CSS file are as follows: font-size: 13px; padding: 6px 4px; background-color: rgb(238, 238, 238); border: 1px solid rgb(204, 204, 204); clear: both; margin- ...

css - aligning text below another text in the center

Looking to style a text in a specific color with a message about another text below it? Want the text centered but not sure how to position it correctly? margin: 0px auto; If this code isn't delivering the desired result and is positioning your text ...

Check out this unexpected margin issue affecting the first element within the Container! Can you please provide an explanation for this anomaly?

Take a moment to check out this fiddle. In Container1 and Container2, the background color is set to #ccc, and h1 and .logo div have margins. While the left and right margins are working properly, the top and bottom margins are not functioning as expected. ...

Tips on ensuring Material-UI Datatable adapts to varying window dimensions

I am facing an issue with the responsiveness of my MUIDatatables. The table is not adjusting properly to different window sizes. I specifically want each row in the table to be displayed on a single line and utilize horizontal scrolling. I attempted to pl ...

What is the recommended approach for displaying data enclosed in double quotes in PHP?

Looking to store HTML text in a variable without using ?> .... <?. The challenge lies with the quotes — wanting to have double quotes instead of single quotes. Using single quotes for variables with interpolation doesn't work: $var = ' ...

Responsive menu not functioning properly with jQuery

I am currently working on a website located at . My goal is to incorporate the navigation plugin called MeanMenu into the site. I have followed all the instructions provided in the tutorial: adding the jQuery script to my HTML, including the CSS in the hea ...

Is there a method to retrieve the subdirectories and files currently present on a given URL?

Picture having a file on your system with the following URL: I am curious if there is any software, command, or script that can retrieve subfolders/files based on a given URL. For instance: Input parameter: http://my.page/folder_1/ Output: http://my.p ...

Unable to transmit HTML emails

I've been encountering an issue while trying to send HTML emails using Gmail SMTP from CI. It seems that my emails are being rejected if they contain any tables. Interestingly, there is no error message provided; the emails simply do not show up in my ...

Tips for creating a CSS triangle background on a div without relying on borders or images

I have experience creating triangles using CSS borders and images, but this time I want to achieve it using background color. Here is the image of the desired outcome: https://i.stack.imgur.com/qP3yt.jpg If anyone can assist me with this, it would be gre ...

The lifespan of my cookie is limited

I am utilizing the jQuery.min.js from https://github.com/carhartl/jquery-cookie and my cookie code looks like this: $(function() { //hide all divs just for the purpose of this example, //you should have the divs hidden with your css //check ...

Utilizing AJAX to submit a combination of text fields and files in an HTML form

Just starting out with AJAX and JQuery, I'm curious if it's possible to send data from an HTML form, including a text file and two separate text boxes, via an AJAX request. So far, I've managed to send the data from the text boxes but not th ...

Presentation for a div's background image with the use of jQuery

My header contains a large div with text contents and boxes, along with a background image. Now I want to create a slideshow for this div's background. Does anyone know how to make a slideshow for a div's background image? I've searched ex ...

Expansive space for floating numerous tiny circles in the air

Presently, I have a map that features several small circles/dots created using the border-radius property. When hovering over a dot, it triggers an animation along with other effects. MY CONCERN: At the moment, I need to be incredibly accurate when tryi ...

The canvas game's animation can only be activated one time

I am currently working on designing a straightforward canvas game: Here is the code snippet located on CodePen var canvas; var ctx; var x = 300; var y = 400; var r = 0; var mx = 0; var my = 0; var WIDTH = 600; var HEIGHT = 400; function circle(x,y,r) ...

Developing a custom JavaScript function to iterate through a group of html elements

In my mission to create a function that loops through a set of HTML elements and gathers their values, I aim to then utilize those values to produce an HTML textarea. Thus far, I've established a series of HTML input boxes and a JavaScript function f ...

Error in Express application due to uncaught SyntaxError

I am attempting to live stream data using websockets to Chartjs, however I keep encountering the following error. main.js:1 Uncaught SyntaxError: Unexpected token < What could be causing this issue? The code for my server and HTML is as follows: ...

Showcasing an item hidden behind text and a dropdown menu

I have made changes to the background image in my Wordpress theme and now I want to display another image on top of the white content area. To achieve this, I used the following code: img style="position: absolute; top:244px; left: 220px;" src="http://ww ...

What is the best way to eliminate the white margin that is showing up on the right side of my website?

Here's a question that has been bugging me recently... So, I've been working on creating my own version of an Airbnb website called 'tombnb' for a few weeks now. Everything was going smoothly until I encountered a persistent issue. Th ...

Customizing the scrollbar within a modal using reactjs-popup

I am currently working on a CustomPopup functional component that includes a reactjs-popup: function CustomPopup({setFalse, item}){return(<Popup open={true} onClose={() => {setFalse(false)}} modal closeOnDocumentClick nested> {item === "howto ...

The ElementNotInteractableException error occurred because the element cannot be interacted with as it is currently not visible, therefore it cannot be manipulated using robot framework

I am encountering an issue with a dropdown menu. When running the script, I receive the error message "ElementNotInteractableException: Message: element not interactable: Element is not currently visible and may not be manipulated." Upon inspecting the HT ...