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

Exploring BreakPoints using gridlisttiles

Can Grid List Tile components be configured to occupy the entire screen on small devices using sm={12} lg={6}, but only half of the screen on larger devices? If not, is there a way to adjust the grid list layout to display fewer tiles per row on smaller ...

Switching Between HTML Using Javascript

I am currently working on an app that allows users to easily check the local weather and temperature in either celsius or fahrenheit. However, I've encountered a problem when trying to switch between the two unit types by simply clicking on the temper ...

Ensure the background image is optimized for viewing on screens of any size

I am facing an issue with an image on my website that serves as the background for some elements. The image is wider than it is tall, causing problems for users viewing the site on phones. Is there a way to cut off the sides of the image and ensure it fits ...

Leveraging the (click) event within an HTML template to manage a [hidden] element located in a different template using Angular 2

Within my project, I have two TypeScript files, each containing HTML templates inside the @Component. In one of the templates, there are info cards that can be collapsed or expanded using [hidden]="collapsed". The following function is present in both file ...

Searching for text within an HTML document using Selenium in Python can be easily achieved by using the appropriate methods and

Is there a way to find and retrieve specific texts within an HTML file using Selenium in Python, especially if the text is not enclosed within an element? <div class="datagrid row"> ==$0 <h2 class="bottom-border block">Accepted Shipment</h ...

Rotating SVG images with ease at any center point

I attempted to remove the unsupported animateTransform element: <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1.2s" repeatCount="indefinite" /> and replaced it with CS ...

Hide the <footer> element unless there is extra space

I am trying to create a footer that only appears when the viewer has scrolled to the bottom of the page. This means that if you haven't reached the bottom yet, the footer is not visible. The concept seems simple enough, but as I am still in the learni ...

Creating a React Swiper that dynamically centers a sliding element of varying width

I am currently working on a carousel where the center slide needs to expand to display additional content. I have set up a working example in this codesandbox. The main criteria for this project are: Non-centered slides will be minimized to show only the ...

Utilize CSS exclusively on the "Theme Options" page within a Wordpress website

Everything is running smoothly with my current PHP code, which controls the design of my "Theme Options" page under the WP API Appearance menu. However... The issue is that the CSS stylesheet is affecting all other menus in the WP dashboard as well, like ...

Deactivating controls while displaying the loading bar in AngularJS

I'm currently working on a web application using AngularJS. I want to incorporate a loading bar to signify long data load times from the server. To replicate heavy data loads, I am utilizing $timeout to trigger the loadbar when the operation begins a ...

Designing a logo atop a Jquery tab

In the layout I have designed, there is a header followed by a jQuery Tab navigator. The tabs have padding on the left side, and I want the header image to overlap this area. Currently, the image is hidden behind the tab panel. Which CSS property can be us ...

Profile picture placeholder with conditional logic

After extensively searching online, I was unable to find a solution on how to add a default profile picture. Here is the code snippet I used for uploading an image chosen by the user: <td><img class="image" src="image/<?php echo $contact[&apos ...

Tips for updating information when a button is chosen

Hello everyone, I need some help with a form that has three select buttons. The button labeled "Distribute" is already selected when the page loads, and it contains information about full name, password, and location. How can I use JavaScript to create a c ...

How to Build a Number Spinner Using Angular Material?

Is there a number spinner in Angular Material? I attempted to use the code provided in this question's demo: <mat-form-field> <input type="number" class="form-control" matInput name="valu ...

Revamping JSP Content with DOJO AJAX: A Comprehensive Guide

I am currently utilizing the Dojo library and I need assistance with replacing all the content of my jsp/html file. I am attempting to dynamically reload my page whenever new data is updated. Below is the code snippet from my dojo implementation: functio ...

Dynamic image swapping using JSON key in Angular

Trying to display different icons based on a property that contains specific words. If the property includes "Health Care" or "Health Care .....", I want to show one image, otherwise another. I've tried using ng-show but my syntax seems off. Any sugge ...

Increasing the margin-left automatically in Bootstrap 3.0.0

I am looking to automatically generate margin-left in the ".card" class "style" element every time a post is entered on a page. My jQuery version is 1.12.4 This is my idea: If the .card CSS style has a margin-left of 0 and width of 479px, set position to ...

Should I utilize a single form or one for each table row in asp.net mvc?

While working on a project, I caught myself in a coding dilemma: <table> <tr> <th>Code</th> <th>Enabled</th> <th>Percentage</th> <th>Amount</th> <th>Start&l ...

What are the steps to create a hovering dropdown menu that changes the background window to transparent when hovered over?

Is there a way to create a dropdown menu that changes the background window to transparent when hovered over? Here is an example of what I am looking for: The dropdown menu should look like this when hovered over: I would like the background window to b ...

Utilizing Emotion CSS to incorporate images into buttons

I'm trying to add some style to two buttons, Up and Down, by using emotion CSS but I'm having trouble. Currently, I typically style my elements within a function. Is there a way for me to accomplish this with emotion CSS? I checked out but still ...