How to float child items

[newcoder1010]

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 February 23, 2019 by newcoder1010

[dsonesuk]

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.

[newcoder1010]

Thank you.