选择列表项中的超链接。

huangapple go评论58阅读模式
英文:

Select a href in a list item

问题

I have to select a a href inside a list and exclude it from specific styling. Could not make it work with nth-child and tailwind.

<ul>
    <li><a href="/" class="">linka</a></li>
    <li><a href="/" class="">linkb</a></li>
    <li><a href="/" class="">linkc</a></li>
    <li><a href="/" class="">linkd</a></li>
    <li><a href="/" class="">linke</a></li>
    <li><a href="/" class="">linkf</a></li>
</ul>

So I want to apply styling to all links, a to f, but excluding b and d. Again, I have to target the a href and give it a class. Tailwinds arbitrary variants seems the way to go.

Came up with this:

ul > li > a {
@apply [&>*:not(:nth-child(-n+1))]:block;
}

But that did not work.

See above. See above.

英文:

I have to select a a href inside a list and exclude it from specific styling. Could not make it work with nth-child and tailwind.

<ul>
    <li><a href="/" class="">linka</a></li>
    <li><a href="/" class="">linkb</a></li>
    <li><a href="/" class="">linkc</a></li>
    <li><a href="/" class="">linkd</a></li>
    <li><a href="/" class="">linke</a></li>
    <li><a href="/" class="">linkf</a></li>
</ul>

So I want to apply styling to all links, a to f, but excluding b and d. Again, I have to target the a href and give it a class. Tailwinds arbitrary variants seems the way to go.

Came up with this:

ul > li > a {
@apply [&>*:not(:nth-child(-n+1))]:block;
}

But that did not work.

See above. See above.

答案1

得分: 1

I'd suggest, after verifying the functionality in the comments:

li {
  padding-block: 0.5rem;
  padding-inline: 1rem;
}

a {
  display: block;
}

/* here we select all <a> elements that are within
   <li> elements that are NOT :nth-child(2) or
   :nth-child(4) of among their siblings: */
li:not(:nth-child(2), :nth-child(4)) a {
  background-color: hsl(300deg 80% 80% / 0.7);
}

JS Fiddle demo.

英文:

I'd suggest, after verifying the functionality in the comments:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

li {
padding-block: 0.5rem;
padding-inline: 1rem;
}
a {
display: block;
}
/* here we select all &lt;a&gt; elements that are within
&lt;li&gt; elements that are NOT :nth-child(2) or
:nth-child(4) of among their siblings: */
li:not(:nth-child(2), :nth-child(4)) a {
background-color: hsl(300deg 80% 80% / 0.7);
}

<!-- language: lang-html -->

&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;/&quot; class=&quot;&quot;&gt;linka&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/&quot; class=&quot;&quot;&gt;linkb&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/&quot; class=&quot;&quot;&gt;linkc&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/&quot; class=&quot;&quot;&gt;linkd&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/&quot; class=&quot;&quot;&gt;linke&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/&quot; class=&quot;&quot;&gt;linkf&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

<!-- end snippet -->

JS Fiddle demo.

huangapple
  • 本文由 发表于 2023年4月20日 06:20:42
  • 转载请务必保留本文链接:https://go.coder-hub.com/76059220.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定