CSS: Selecting Grandsons Anchors from ID

Question

I would like to apply CSS only to the anchors in order to remove borders, and make transparent its background. Unfortunately the HTML is autogenerated then I can't to remove classes, or edit them. Only overwrite when are shown.

Here the generated Code (modified to prevent share company private code).

    <div class="ui-content" role="main">
        <div class="voOutput" id="titlePrompt">
            <div style="padding:30px;">
                Welcome:
            </div>
        </div>
        <div data-role="controlgroup" id="groupDiv" class="ui-controlgroup ui-controlgroup-vertical ui-corner-all">
            <div class="ui-controlgroup-controls ">
                <a class="ui-btn ui-shadow ui-corner-all ui-first-child" href="..." id="menu_00MenuAuth_Continue">
                    <button class="bgGreen ui-btn ui-shadow ui-corner-all">Continue</button>
                </a>
                <a class="ui-btn ui-shadow ui-corner-all voMenuItem" href="..." id="menu_00MenuAuth_No">
                    <button class="bgRed ui-btn ui-shadow ui-corner-all ui-last-child">No</button>
                </a>
            </div>
        </div>
        <div class="voOutput" id="finalPrompt">Our policy of... <a href="https://www.w3schools.com" target="_blank" class="ui-link">here</a>.
        </div>
    </div>
    

METHOD 1

I was trying to applying the CSS

.transparentAnchor {
    background: rgba(255,255,255,0);
    color: red;
    border-width: 0 0 0 0;
}

HTML

                <a class="ui-btn ui-shadow ui-corner-all ui-first-child transparentAnchor " href="..." id="menu_00MenuAuth_Continue">
                    <button class="bgGreen ui-btn ui-shadow ui-corner-all">Continue</button>
                </a>
                <a class="ui-btn ui-shadow ui-corner-all voMenuItem transparentAnchor " href="..." id="menu_00MenuAuth_No">
                    <button class="bgRed ui-btn ui-shadow ui-corner-all ui-last-child">No</button>
                </a>

But, it doesn't work for me!!!

METHOD 2

I can select #groupDiv

<style>
    #groupDiv > div:* {
      background: rgba(255,255,255,0);
      color: red;
      border-width: 0 0 0 0;
    }
</style>

QUESTIONS:

How I must to define the class using Method 1?

How can I select the Anchors (grandson's) of Id groupDiv? Obviously my Method 2 is bad defined! (I have the Id, I want to apply to anchor <a...> children of first <div...> son).

Answer 1

Some question, why you need a button inside an <a>?

But, you can solve with this:

 #groupDiv > div a:first-child {
      opacity:.5
 }

    <div class="ui-content" role="main">
        <div class="voOutput" id="titlePrompt">
            <div style="padding:30px;">
                Welcome:
            </div>
        </div>
        <div id="groupDiv" class="ui-controlgroup ui-controlgroup-vertical ui-corner-all">
            <div class="ui-controlgroup-controls ">
                <a class="ui-btn ui-shadow ui-corner-all ui-first-child">
                    <button class="bgGreen ui-btn ui-shadow ui-corner-all">Continue</button>
                </a>
                <a class="ui-btn ui-shadow ui-corner-all voMenuItem">
                    <button class="bgRed ui-btn ui-shadow ui-corner-all ui-last-child">No</button>
                </a>
            </div>
        </div>
    </div>