first item's grandchild selection

https://jsfiddle.net/jg69c3yf/1/

I don't have a lot of experience with CSS. My goal is to target the div with the class arrow-right, but only if it's inside the first child of a div with the class active.

In this sample code, Only item 3 should be styled with green color.

HTML :

<div class="owl-stage">
<div class="owl-item">
1 
</div>
<div class="owl-item">
2 
</div>

<div class="owl-item active">
<div class="item">
 <div class="arrow-right">
3 

 </div>
</div>


</div>
<div class="owl-item active">
<div class="item">
 <div class="arrow-right">
4 
 </div>
</div>

<div class="owl-item active">
<div class="item">
 <div class="arrow-right">
5 

 </div>


</div>

</div>

CSS:

.owl-stage .owl-item.active:first-child {

background-color:red;
color:blue;

}


.owl-stage .owl-item.active:first-child .arrow-right {
background-color:red;
color:green;

}

Answer №1

There seems to be an issue with missing </div> end tags in your HTML code, which becomes apparent when properly indenting the elements.
I have added the missing </div> tag, please let me know if it was done incorrectly!

In CSS, it is possible to achieve what you want using a small trick. It appears that the designers overlooked this requirement. The trick involves initially styling "all .owl-item.active divs" and then resetting the styles for "all .owl-item.active divs following other .owl-item.active divs".

.owl-stage .owl-item.active {
  background-color: red;
  color: blue;
}

.owl-stage .owl-item.active .arrow-right {
  background-color: red;
  color: Green;
}

.owl-stage .owl-item.active ~ .owl-item.active {
  background-color: inherit;
  color: inherit;
}

.owl-stage .owl-item.active ~ .owl-item.active .arrow-right {
  background-color: inherit;
  color: inherit;
}
<div class="owl-stage">
  <div class="owl-item">
    1
  </div>
  <div class="owl-item">
    2
  </div>

  <div class="owl-item active">
    <div class="item">
      <div class="arrow-right">
        3
      </div>
    </div>
  </div>
  
  <div class="owl-item active">
    <div class="item">
      <div class="arrow-right">
        4
      </div>
    </div>
  </div> <!-- Added this closing tag -->
  
  <div class="owl-item active">
    <div class="item">
      <div class="arrow-right">
        5
      </div>
    </div>
  </div>
</div> <!-- And this one too -->

Answer №2

If you want to experiment with a different look, consider the following CSS code:

.owl-stage .owl-item .arrow-right{
  background-color: red;
  color: blue;
}

/* Customize the active class */
.owl-stage .owl-item.active .arrow-right{
  background-color: white;
  color: Green;
}
/**/


/* Reset back to default for inactive classes */
.owl-stage .owl-item.active+.owl-item .arrow-right{
  background-color: red;
  color: blue;
}
<div class="owl-stage">
  <div class="owl-item">
    1
  </div>
  <div class="owl-item">
    2
  </div>
  <div class="owl-item active">
    <div class="item">
      <div class="arrow-right">
        3
      </div>
    </div>
  </div>
  <div class="owl-item active">
    <div class="item">
      <div class="arrow-right">
        4
      </div>
    </div>
  </div>
  <div class="owl-item active">
    <div class="item">
      <div class="arrow-right">
        5
      </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

What is the best way to vertically align Bootstrap Columns to ensure they have consistent heights?

I'm currently in the process of building a website that features multiple images and content organized into columns using Bootstrap as the framework. I'm wondering if there's a way to automatically adjust all the columns to the height of th ...

Having trouble getting Tailwind CSS to work with React components?

I'm having trouble getting Tailwind CSS to work properly. I've made sure to update to the latest version, but for some reason Tailwind is not functioning and there are no errors showing up in the console. Here is a link to my header component an ...

changing size when hovered over with the mouse is not consistent between entering and exiting

Hi there, I'm currently utilizing the transform: scale(); property on a website and could use some assistance with a particular issue I haven't been able to find an answer for online. Here is the code snippet I'm working with: HTML: <d ...

What are some methods for concealing custom CSS overflow in IE8?

In my latest project, I created a script that utilizes pure css to toggle between an image, image caption, and text. However, when testing it in IE8, all the elements appear at once instead of toggling as intended. To showcase the issue more clearly, I h ...

Columns that can be resized in a right-to-left (

Whenever I use RTL, the columns behave erratically when resizing... I have implemented colResizable. You can see an example here: http://jsfiddle.net/r0rfrhb7/ $("#nonFixedSample").colResizable({ fixed: false, liveDrag: true, gripInnerHtml: "<d ...

Text Alignment Issue in Icon Bar of Zurb Foundation 5

There's an unusual problem I'm encountering with the alignment of text under the icon bar not being properly centered below the icons. Here is a snippet of the code: <div class="row"> <div class="small-12 columns"> < ...

Invoke a function within the <img> tag to specify the source path

I have been attempting to achieve something similar to the following: <img id="icon" class="cercle icon" src="getIcon({{item.status}})" alt=""> This is my function: getIcon(status){ switch (status) { case 'Ongoing': ret ...

How long does jQuery animation last until completion?

Within my project, I am utilizing the animationComplete function from the jQuery mobile library. You can find this function at The animation in my project involves a sequence of objects with various tasks to be executed at each point of the animation. The ...

When utilizing the tab key on Chrome, the iFrame fails to scroll

We are currently facing an issue with our web application that is embedded inside an iFrame. On one of our HTML pages, there are numerous textboxes with a large amount of content, requiring users to scroll down to navigate through it all. When using the ...

The ngbDatepicker within the Bootstrap angular framework is designed to seamlessly integrate with ngbPanelContent without causing overflow issues

I've integrated the ngbDatepicker into a form as shown below <ngb-panel> <ng-template ngbPanelTitle> <div class="row"> <ui-switch (change)="onChange($event,2)" [checked]="profession ...

What is the best way to select an HTML tag element using the :v-deep() selector?

When I utilize the following: ::v-deep img { ... } it functions but triggers a deprecation warning: [@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead. How can I achieve the same effect using ...

show information on a separate screen following the selection of a choice

After selecting an option, how can I make #formid appear where the form is filled in with the stock selected in the option section? <div class="form-group"> <label for="exampleFormControlSelect1">Item Name</label> <select clas ...

What could be causing my divs to overlap?

I recently started coding and I'm facing an issue with my <header> and <section> divs overlapping each other. I was under the impression that being block elements, <section> should be displayed below <header>. Any suggestions o ...

Help! The CSS height property is not working properly and I'm not sure how to resolve

I'm facing an issue with the height property of a specific div and I can't seem to fix it. SCSS: .security{ border: 3px #1D3176 solid; display: flex; h2{ position: ...

Enhance your Divi theme with Elegant Themes: Explore mobile-friendly background image zoom effects

I have a regular section module with an image as the background. The design looks great on desktop but appears zoomed in and blurry on mobile devices. I'm struggling to understand why the mobile view is not adjusting properly, and I am unsure if there ...

Should servlet response be HTML for use in AJAX calls?

I am currently in the process of developing a web application with multiple pages, including index.html which serves as the main page and contains various <a> tabs linking to different Servlet pages. As part of my design, I have a consistent CSS lay ...

Toggling javascript functionality based on media queries

On one of my slides, I want to display images that are specific to different devices like iPhone, iPad, and desktop. I am looking for a way to filter these images based on the device. Using display:none won't work as it's JavaScript, but here is ...

Tips on retrieving unique data with id in Angular 6

My goal is to retrieve a particular customer's details by clicking on their ID or name. I have turned the name into a link that, when clicked, will navigate to a new page with the ID as a parameter so all the specific customer's information can b ...

Various CSS libraries offer a range of design options, including DataTables and Bootstrap

Incorporating both Bootstrap and DataTable into my design has caused conflicts with CSS styles. This issue extends beyond just these libraries, making me wonder if there is a way to prioritize my own styles over library styles. Can anyone provide guidanc ...

Using the KnockOut js script tag does not result in proper application of data binding

Being new to knockout js, I found that the official documentation lacked a complete html file example. This led me to write my own script tags, which initially resulted in unexpected behavior of my html markups. Strangely enough, simply rearranging the pos ...