Accessing JSF element by id from css

Question

I’ve created <div> using JSF.

<h:panelGroup layout="block" id="loginlogo"/>

And I’m trying to access this div by CSS:

#loginlogo{
…
}

But I can’t access it. So, this panelgroup is rendered to this:

<div id="j_idt33:loginlogo"></div>

If I change

<h:panelGroup layout="block" id="loginlogo"/>

to

<h:panelGroup layout="block" styleClass="loginlogo"/>

And css to

.loginlogo{
…
}

Then all works fine. So, how can I access div (panelgroup) from css by id?

Answer 1

Try with this

[id$=loginLogo] {
    ...
}

This CSS syntax is using attribute selectors, and $= means it will match all elements whose id attribute ends with loginLogo.