I want to style only the first div inside the experience-container, but it is styling all the divs inside the experience container. How can use :first-child or :nth-child to do this?

This is my code:

    <article v-for="(item, index) in experiencies" :key="index"
        class="experience-container d-flex flex-column justify-content-start align-items-center w-100 p-3 pt-4 pb-4 rounded-3 ">
        <div class="h-100 d-flex flex-column gap-4">
            <div class="title mt-4">
                <h3 class="mb-0">{{ $t("Experience." + item.company + ".company") }}</h3>
                <p class="mb-0">{{ $t("Experience." + item.company + ".job") }}</p>
                <p class="mb-0 duration">{{ $t("Experience." + item.company + ".duration") }}</p>
            </div>
            <div class="summary w-auto">
                <p class="mb-1">{{ $t("Experience.Experience1.description") }}</p>
                <div class="d-flex flex-wrap gap-2">
                    <span v-for="(element, index) in item.tags" :key="index"
                        class=" tag bg-secondary bg-opacity-50 text-primary rounded-5 text-nowrap">
                        {{ $t("Experience.Experience1.tags[" + element + "]") }}
                    </span>
                </div>
            </div>
        </div>



.experience-container div:first-child {
    width: 65%;
}