css Question posted in
Some basic documentation can be found here.

How to style a specific nested tag from a parent element using Tailwind CSS?

I want to style an <a> tag inside a using Tailwind CSS. I want to add the style via the parent <ul> tag. I tried [&>li>a], but it doesn’t work as expected.

Here is my HTML structure:

<ul class="flex items-center [&>li>a]:hover:text-white">
  <li class="flex items-center">
    <div>
      <a href="/"> Route3 </a>
    </div>
    <a href="/"> Route2 </a>
    <span class="hero-chevron-right separator-icon"></span>
  </li>
</ul>

How can I achieve this styling correctly? I don’t want to change any config or add new selectors.

Tags:

2

Answers


  1. 0

    You can accomplish this by styling each of the anchor tags in this way:

     <ul class="flex items-center">
  <li class="flex items-center">
    <div>
      <a class="hover:text-white" href="/"> Route3 </a>
    </div>
    <a class="hover:text-white" href="/"> Route2 </a>
    <span class="hero-chevron-right separator-icon"></span>
  </li>
</ul>
    Login or Signup to reply.
  2. 0

    The way you’ve written it, the :hover applies to the ul. You want [&>li_a:hover]:text-white

    <ul class="flex items-center [&>li_a:hover]:text-white">
  <li class="flex items-center">
    <div>
      <a href="/"> Route3 </a>
    </div>
    <a href="/"> Route2 </a>
    <span class="hero-chevron-right separator-icon"></span>
  </li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search