Apply css to first table

Question

See this example: https://jsfiddle.net/kevalbhatt18/w361a9hg/

When you see fiddle first strach result window. otherwise you want see what i want.

My problem is that I crate table and apply css all working fine but now i want to apply border-left: 1px dotted; to only first table.

<div class='openDiv hide'>
    <table id="addPropertyValue1"></table>
    <table id="addPropertyValue2"></table>
    <table id="addPropertyValue3"></table>
    <table id="addPropertyValue4"></table>
    <table id="addPropertyValue5"></table>
</div>

I tried with first-child .but not working

.openDiv :first-child{
        border-left: 1px dotted;
    }

Note : dont apply css on id directly like

.openDiv #addPropertyValue1{
    border-left: 1px dotted;
}

want pure css solution will help me I don't want jquery or javascript to apply dynamic class on table

Answer 1

Use first-child for table inside .openDiv.

Like this:

.openDiv table:first-child {
    border-left:1px dotted;
}

Updated fiddle is here.

Answer 2

Apply the css on first child

.openDiv table:first-child{
    border-left: 1px dotted #000;
}