Вопрос о стилизации вкладок Navbar в css (Wordpress)

Question

Я пытаюсь стилизовать вкладки navbar. У меня есть две части кода, которые работают, но мне нужно больше контролировать отдельные вкладки и не знаю, как это сделать.

Эти вкладки находятся под заголовком и справа. И я пытаюсь закруглить нижний левый угол только первой вкладки. Два фрагмента кода под обоими вокруг левого нижнего края каждой вкладки в навигационной панели.

Я хотел бы выяснить правильный код, который дал бы мне контроль над каждой вкладкой и позволил бы мне стилизовать каждую вкладку индивидуально. 2 фрагмента ниже приводят меня на полпути, просто я не уверен, что лучше улучшить или что добавить.

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

Или это:

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

Спасибо за любую помощь

Answer 1

Вы можете быть чрезмерно инженерным здесь - вы рассматривали возможность использования CSS :first-child псевдокласс? В противном случае, как насчет округления нижней левой части <ul> а не первый <li>? Исходя из того, что вы объяснили, оба из них позволят достичь желаемых результатов без написания строки PHP.

Answer 2

Что бы я сделал, так как у меня обычно есть какой-то php-скрипт, генерирующий html, - когда html генерируется, придайте каждой вкладке свой стиль.

// 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>"

Или что-то в этом роде.

Тогда вы можете просто создать стиль CSS

.tabclassname {
    // Special CSS goes here
}

В качестве альтернативы, если вы не генерируете вкладки программно. Вы можете просто ввести имя для каждого класса вручную.

РЕДАКТИРОВАТЬ: Я в основном предложил PHP, потому что вы упомянули о желании контролировать все ваши вкладки. Если вы просто хотите первую вкладку, то ul: first-child - хороший метод, или добавьте эффект округления к ul, как было предложено Гэвином.