Any apex visualforce component created with a custom id, results into an html component created with an id which is prefixed by the their parent's id.
<apex:outputPanel layout="block" id="hello" styleClass="helloClass">
This results into a div tag that results with the prefixed id.
<div id="j_id0:hello" class="helloClass">
Is there a way that the parent id j_id0
can be avoided to prefix with the id of the class. This way the resulting component may look like this.
<div id="hello" class="helloClass">
Best Answer
Controlling the Id can be achieved but no precisely as you mentioning .But there is a way to get Id populated as you want in Visualforce Page.
One way to do the same will be assigning Ids to All Compoenents on Page
Official Document link