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?

htmlcss

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

Is all of the CSS stored in one or multiple files?

Will the number of CSS files on my website impact its performance? I understand the necessity of having a separate file for print styles, but I'm wondering about the other CSS files. Is it better to have all my styles in one file or split them into mu ...

cssweb

The navigation bar seems to be missing from the page

I am currently working on developing a responsive navigation bar with CSS animation. However, I am encountering some issues when trying to run the code on my laptop. Upon running it, only the checkbox appears while the list of navigation items is displayed ...

htmlcssnavbar

The height of the content in the polymer core-scaffold cannot be set to 100%

I am working with a polymer element that I have defined. The main objective is to make the conversation_container element have a height of 100% so that the message_box_container can be positioned at the bottom of the entire panel using position: absolute; ...

htmlcsspolymer

Adjusting the height of the navigation bar in BootStrap

I'm having trouble resizing the height of the navbar-default in this Bootstrap sample. It seems to be too big for my needs. Are there any Bootstrap classes I can use to adjust the height? For example: <form class="navbar-form navbar-left" role="s ...

htmlcsstwitter-bootstrap

I am interested in using a loop in Angular to highlight my div element

Enhancing my comprehension regarding the mentioned images. If I don't select anything within the div property, the default style (css) should appear like this, at least when one div is selected. However, the issue arises when unable to select. This ...

javascripthtmlcssangulartypescript

What could be causing the issue of CSS Styles not being applied to an Angular 2 component with Vaadin elements?

Currently, I am immersed in the tutorial on Vaadin elements using Angular 2 that I stumbled upon here In section 5.3, Styles are applied to the app.component.ts as shown below import { Component } from [email protected]/core'; @Component({ select ...

htmlcssangulartypescriptvaadin

What is the best way to incorporate both images and text in PHP code?

I'm currently working on creating a large image call-to-action (CTA) for my new WordPress website. I've set up a new field group with the type "group" in ACF, and added some functions in PHPStorm. However, none of my images, text, or links are ap ...

javascriptphpcsswordpressadvanced-custom-fields

Keeping track of the toggle state using a cookie

While searching for a way to retain the toggle state, I stumbled upon js-cookie on GitHub. The documentation provides instructions on creating, reading, and deleting a cookie. However, an example would have been really helpful in enhancing my understanding ...

javascriptjqueryhtmlcookiestoggle

When using a jQuery function, remember to always return false

I'm currently developing a forum and looking to implement client-side form validation. However, I'm unsure about how to validate the form before submission. I've tried using an 'on' function, but I need a way to notify the user if ...

jqueryhtmlcodeigniter

Different Positions in Flexbox/Container

I am trying to create a series of flexbox items that have both an image and content. I want the images to alternate sides within each flexbox item (one on the left, one on the right, and so on), but I can't figure out how to make it work. Any advice o ...

htmlcss

The Angular service successfully provides a value, yet it fails to appear on the webpage

Currently, I am starting to dive into Angular from the ground up. One of my recent tasks involved creating a component called 'mylink' along with a corresponding service. In my attempt to retrieve a string value from the service using 'obse ...

htmlangulartypescript

How to Customize the Menu Style in Your WordPress Theme

As a newcomer to Wordpress theme development, I am struggling to properly style my navigation menu. Below is the raw HTML code I have: <!-- Navigation --> <nav class="navbar navbar-default navbar-custom navbar-fixed-top"> <div cl ...

csswordpressmenuthemes

Customizing the style of react-select is essential for creating a unique and visually appealing user experience

I am looking to maintain the visual style of my input fields to match that of a react-select component. I have been advised to use styled-components, yet I am uncertain about which styles need to be adjusted in order to achieve the desired outcome. Ideally ...

cssreactjsstyled-componentsreact-select

Communicating between iframes and parent elements via events

I'm trying to trigger an event in my iframe using the following code: $('body').trigger('my_event'); However, I want to bind this event on my main page that contains the iframe like this: $('iframe').find('body&ap ...

javascriptjqueryhtmliframe

Center an element on the screen by dynamically adjusting its position according to the media query

As I work on creating a responsive website that can adapt to screens of various devices, I am facing a challenge. Each device has a different number of pixels, making it difficult to centrally position a div dynamically. Currently, I am using margin-left: ...

htmlcsstwitter-bootstrap

How can we seamlessly transition from adding a class to setting scrollTop on a particular div?

I have successfully implemented a jQuery script to change the background color of my navbar on scroll. Here's the code I used: jQuery(document).ready(function($) { $(window).scroll(function() { var scrollPos = $(window).scrollTop(), nav ...

jquerycsswordpress

Looking to modify the HTML layout in order to be compatible with a specific script

Utilizing a form validation script with required:true data-validation will stop the form from submitting and highlight invalid fields in red by adding "has-error" to the parent container when the user submits the form. In the code snippet below, "has-erro ...

htmlvalidation

Is there a software available that can transform <style> blocks into inline CSS code?

Is there a tool available that can convert <style> blocks to the corresponding style attributes in an HTML file? For instance, if we have the following input file: <html> <head> <style> .myclass { color:red; } </style> &l ...

htmlcss

Connecting components in React using their IDs on the same page

In my project to create a one-page website in React, I have divided it into different components such as a navbar component and an education component. My goal now is to link the navbar to the education section. In my App.js file, I am including the educat ...

htmlreactjs

Attempting to emulate the grid showcase using flexbox styling

Creating this layout using CSS Grid was a breeze. However, I wonder if it can be achieved with Flexbox. What do you think? .Message { display: inline-grid; grid-template-areas: ". name""date text"; } .Date { align-items: ...

htmlcss