Question about styling Navbar tabs in css (Wordpress)

I'm trying to style navbar tabs. I have two pieces of code that work, but I need more control over the individual tabs and not sure how to do it.

These tabs are under the header and at the far right. And I'm trying to round the bottom left corner of only the first tab. The two code snippets below both round the bottom left of every tab in the nav bar.

I'd like to figure out the proper code that would give me control over each tab and allow me to style each tab individually. The 2 snippets below get me halfway there, just not sure which is better to be improved on or what to add.

.custom .menu, .custom .menu a, .custom .menu li ul {
-moz-border-radius-bottomleft:.5em开发者_运维知识库; font-weight:bold;
-webkit-border-bottom-left-radius:.5em; font-weight:bold;
-moz-border-radius-bottomright:.0em;
-webkit-border-bottom-right-radius:.0em;}

Or this:

/* Remove the border from the far left. */
ul.menu{border-left:0;}

/* Add the left border back in. If you change the color of the nav border in the WordPress admin panel, you will also have to manually change the left border color below. */
ul.menu li.tab-1 a{
    border-left:1px solid #CCC;
    -moz-border-radius-topleft:.5em;
    -webkit-border-top-left-radius:.5em;}

/* This creates the rounded borders. */
ul.menu li.tab a{
    -moz-border-radius-bottomleft:.5em; font-weight:bold;
    -webkit-border-bottom-left-radius:.5em; font-weight:bold;
    -moz-border-radius-topright:.0em;
    -webkit-border-top-right-radius:.0em;}

Thanks for any help

You might be over-engineering here - have you considered using the CSS :first-child pseudoclass? Failing that, how about rounding the bottom left of the <ul> rather than the first <li>? From what you've explained, both of these would achieve your desired results without writing a line of PHP.

What I would do since I generally have a php script of some sort generating the html, is when the html is generated give each tab its own style.

// Assume $menu_tabs contains tab names
echo "<ul>"
foreach($menu_tabs as $tab) {
    $tabclass = tabclass($tab) // Just turn it into a valid css class name
    echo "<li class='tab $tabclass'>$tab</li>"
}
echo "</ul>"

Or something to that effect.

Then you can just create a css style

.tabclassname {
    // Special CSS goes here
}

Alternatively if you are not generating the tabs programmatically. You can just type in a name for each class manually.

EDIT: I mainly suggested PHP because you mentioned wanting control over all of your tabs. If you just want the first tab, then ul:first-child is a good method, or putting the rounding effect on ul as was suggested by Gavin