Activating two labels with one click

I'm trying to use the "checkbox hack" for a tab group design. clicking on one tab (label) checks a radio box. Then using a ~ selector i can switch the pages between display: block/none;

To illustrate this setup, there's first a row of tab buttons and then a row of pages. The radio boxes live as siblings in the pages container.

+-------------------+
| +------+ +------+ |
| | tab1 | | tab2 | |
| +------+ +------+ |
+-------------------+
| +---------------+ |
| |     page 1    | |
| +---------------+ |
| +---------------+ |
| |     page 2    | |
| +---------------+ |
+-------------------+

This primary feature is working, the pages swap out as expected.

Now for the next part, where im having trouble...

When u click a tab i need to change it's css to look "selected". Since the radio boxes are in the pages container I cant use them and a sibling selector to style the tabs themself. It seems that I need another set of radio buttons, this time within the tabs container.

I've gotten this second "checkbox hack" to work, but now I can't seem to execute the two features at the same time. The tab's are built like:

<label for='tab_selector_1'>
    <input id='tab_selector_1' type='radio'/>
    <label for='page_selector_1' id='tab_1'>TAB NAME</label>
</label>

I'd expected the click to bubble through the two labels and activate both checkboxes, but it only acts on the deepest label. In this case only switching the page and not the tab style.

Is there some way to restructure this, or use different css selectors to make it work? The html can be all changed around if this is a bad way to be going about it, I just need it to be a non-js solution.