Question sur le style des onglets Navbar dans css (Wordpress)

Question

J'essaie de mettre en forme les onglets navbar. J'ai deux morceaux de code qui fonctionnent, mais j'ai besoin de plus de contrôle sur les onglets individuels et je ne sais pas comment le faire.

Ces onglets se trouvent sous l'en-tête et à l'extrême droite. Et j'essaie d'arrondir le coin inférieur gauche de seulement le premier onglet. Les deux extraits de code ci-dessous à la fois en bas à gauche de chaque onglet de la barre de navigation. Je voudrais trouver le bon code qui me donnerait le contrôle sur chaque onglet et permettez-moi de styler chaque onglet individuellement. Les deux extraits ci-dessous m'obtiennent à mi-chemin, mais je ne suis pas sûr de ce qui est le mieux à améliorer ou quoi ajouter.

.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;} 

Ou ceci:

/* 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;} 

Merci pour toute aide

Answer 1

Ce que je ferais depuis que je suis généralement un script php de quelque sorte générer le code HTML, est lorsque le html est généré donner chaque onglet a son propre 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>" 

Ou quelque chose à cet effet.

Ensuite, vous pouvez simplement créer un style css

.tabclassname { 
    // Special CSS goes here 
} 

Alternativement, si vous n'êtes pas générer les onglets programme. Vous pouvez simplement taper un nom pour chaque classe manuellement.

EDIT: J'ai principalement suggéré PHP parce que vous avez mentionné vouloir contrôler tous vos onglets. Si vous voulez juste le premier onglet, alors ul: first-child est une bonne méthode, ou de mettre l'arrondi sur ul comme suggéré par Gavin

Answer 2

Vous pourriez être sur-ingénierie ici - avez-vous envisagé d'utiliser le CSS :first-childpseudoclass? A défaut, que diriez-vous d'arrondir en bas à gauche de la <ul> plutôt que la première <li>? D'après ce que vous avez expliqué, ces deux objectifs permettraient d'obtenir les résultats souhaités sans écrire une ligne de PHP.