CSS Change color based on attribute of closest class

This process has been driving me nuts. I am trying to make foundations abide system look nicer. I have created a system that replaces the error class with a success and error system. Everything works well except I am having an issue displaying the success once the field is checked.

HTML

<form data-abide="ajax" id="addNewUser" novalidate="novalidate">
    <div>
        <label class="label" for="fname"><span class="requiredRed">*</span> First Name</label>
        <input type="text" id="fname" name="fname" required="" value="Douglas" aria-invalid="false">
        <div class="fa fa-info-circle errspan fail" style=""><div><p>You must enter a First Name</p></div></div>
        <div class="fa fa-check-circle errspan success"></div>
    </div>
</form>

I have been trying to find if there is a easy way through css to display success based on the 'aria-invalid' attribute such as.

[data-abide] input[aria-invalid='false'] + div.success{ display:block; }