0

As a newbie I am still confused and struggling about the CSS when using aria-label. My HTML for the primary menu reads:

<nav aria-label=’primary’>
<button><a href="index.html">Home</a></button>

so what coding do I use in CSS to show the font height and the background color etc? Is it

nav [aria-label='primary'] { font-size="24"px; background-color="green"; }

or

nav [aria-label='primary'] a { font-size="24"px; background-color="green"; }

My secondary menu on the same page directs\links users to specific areas of the page. I am a newbie at this and am trying to build up my knowledge I am grateful for advice from more experienced members.

Lumley
  • 11
  • 1
  • Neither - they are both wrong. You can't have a space between `nav` and `[aria-label=]` - since that means _Style the aria-label element that is a descendant of the nav element_. Your style should be `nav[aria-label="primary"] a`. Also, an `a` tag inside of a `button` element is invalid HTML, you don't need the button element at all. `nav[aria-label="primary"] a { color: red; }` `` – disinfor Jul 27 '20 at 21:00
  • You say that an a tag inside of a button is invalid HTML but it works. If I change to Home How do I get it to look like a button (which how I prefer it to look) rather than just an underlined link? – Lumley Jul 28 '20 at 22:34
  • Yes, it works, but that doesn't mean it's valid HTML. You use CSS to style the `a` tag to look like a button, try using `nav[aria-label="primary"] a { font-size: 24px; background-color: green; display: inline-block; padding: 10px }` to start and play with it from there. – disinfor Jul 29 '20 at 00:35

0 Answers0