How to bold only secont element in css-CodePudding

How can i bold only second element in css I want to change only >Products< but cannot change the html code.

<header>
        <nav>
            <a href="#">Home</a>
            <a href="#">Products</a>
            <a href="#">About Us</a>
            <a href="#">Contacts</a>
        </nav>
    </header>

Bold only Products

CodePudding user response：

Please try this.

header nav a:nth-child(2) {
  font-weight: bold;
}

CodePudding user response：

You can add a style block with the font-weight: bold property targeting the second <a> element like so:

<header>
  <nav>
    <a href="#">Home</a>
    <a href="#">Products</a>
    <a href="#">About Us</a>
    <a href="#">Contacts</a>
  </nav>
</header>

<style>
header nav a:nth-of-type(2) {
  font-weight: bold;
}
</style>