Jump to content

How to float child items


newcoder1010
 Share

Recommended Posts

Hello,

HTML:

<div class="carousel-inner">

<div class="item active">
<img class="home-img-slideshow" title="Slide 2" alt="Slide 2" src="1.jpg">
<div class="carousel-caption">
<h4>
<a href="http://drupal-8-6-5.dd:8083/node/11">Slide 1</a></h4>
<p>teaser 1... </p>
</div>
</div>

<div class="item ">
<img class="home-img-slideshow" title="Slide 2" alt="Slide 2" src="2.jpg">
<div class="carousel-caption">
<h4>
<a href="http://drupal-8-6-5.dd:8083/node/11">Slide 2</a></h4>
<p>teaser 2... </p>
</div>
</div>

</div>

I would like to place text inside first carousel-caption to left and place text inside second carousel-caption to the right. I have done the following but it is not working. 

CSS:

.carousel-caption:nth-child(1) {text-align:left;}
.carousel-caption:nth-child(2) {text-align:right;}

Please advise.

Edited by newcoder1010
Link to comment
Share on other sites

It does not work like that!

That will attempt to find elements within the parent element (.item) with class '.carousel-caption', since there is only one only that can be targeted that is treated as second-child as the first is the image

So you need to target the parent div's with class '.item' nth-child() as you then with you original code , THEN target that child class instead

.item:nth-child(1) .carousel-caption {text-align:left; background: red;}
.item:nth-child(2) .carousel-caption {text-align:right;background: lime;}

The background colour will give  you a clearer idea how they work and show if they are working or not.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...