Leveraging the :has pseudo-class in Tailwind along with adjacent sibling selectors

My CSS code is working perfectly as intended.

[data-type='transfer']:has(+ [data-type^='sale_']) {
  opacity: 0.25;
}

This CSS snippet targets elements with data-type="transfer" that are next to elements containing data attributes starting with "sale_" and reduces their opacity instead of hiding them for clarity.

Check out this quick demo:

[data-type='transfer']:has(+ [data-type^='sale_']) {
  opacity: 0.25;
}
<ul>
  <li data-type="transfer">a transfer</li>
  <li data-type="sale_buyer">a buyer sale</li>  
  <li data-type="transfer">a transfer</li>
  <li data-type="sale_seller">a seller sale</li>    
</ul>

I'm now trying to convert the above CSS into Tailwind code since :has has been supported. My attempt, however, is not working:

<li className='has-[[data-type="transfer"] + [data-type^="sale_"]]:hidden'>...</li>
cssreactjstailwind-css

Answer №1

If you're looking to work in reverse, using Tailwind's `peer-` feature may be more appropriate. (It's interesting that one can utilize `:has` to target siblings; `[data-type='transfer'] + [data-type^='sale_']`) is a CSS selector that achieves similar results.

Key class string to note:

opacity-25 peer peer-[[data-type=transfer]]:data-[type^=sale\_]:opacity-100

(The choice of `sale\` instead of `sale_` is due to how underscores are handled in Tailwind. In this case, omitting the escape character doesn't affect the output for some reason.)

Corresponding CSS code:

.opacity-25{
  opacity: 0.25
}

.peer[data-type=transfer] ~ .peer-\[\[data-type\=transfer\]\]\:data-\[type\^\=sale\\_\]\:opacity-100[data-type^=sale_]{
  opacity: 1
}

View Tailwind Play demo

Edit 1: Adjusted for the reversed aspect of my initial response.

Edit 2: ~ has looser rules than +, so this solution isn't foolproof. Keeping it here for reference purposes.

Answer №2

After consulting with the creator of Tailwind, I finally found the solution to my problem. It turns out that I was missing a + symbol inside the initial left bracket all along. This answer provided by him is truly invaluable.

<ul>
  <li class="has-[+[data-type^='sale\_']]:data-[type='transfer']:opacity-25" data-type="transfer">a transfer</li>
  <li class="has-[+[data-type^='sale\_']]:data-[type='transfer']:opacity-25" data-type="sale_buyer">a buyer sale</li>  
  <li class="has-[+[data-type^='sale\_']]:data-[type='transfer']:opacity-25" data-type="transfer">a transfer</li>
  <li class="has-[+[data-type^='sale\_']]:data-[type='transfer']:opacity-25" data-type="sale_seller">a seller sale</li>    
</ul>

Take a look at the playground demo here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I alter the text color on hover within a Material UI card? My goal is to have the text color change when hovering over the card itself, rather than just the text

When I apply CSS to the card hover effect, it works fine. However, I also want to change the text color along with the card color on hover. card: { maxWidth: 350, height: 300, '&:hover': { backgroundColor: '#373737 !impor ...

cssmaterial-uicard

What could be causing my MERN / Passport User Login to fail to redirect upon successful login?

Despite providing the correct login information, there is no response. No error messages or redirection occur. router.post("/login", (req, res, next) => { passport.authenticate( "local", { successRedirect: "/dashboard" }, (err, user, done ...

node.jsreactjsexpresspassport.js

Is it possible to trigger the onNewRequest property when the onBlur event is fired for AutoComplete in Material-UI?

Currently, I am utilizing Material-UI and making use of the onNewRequest property in the AutoComplete field. However, the onNewRequest only triggers when Enter is pressed or when a value is selected. I am interested in calling the onNewRequest even when ...

javascriptreactjsmaterial-ui

What sets Next.js apart: Exploring the contrast between leveraging the "revalidate" option in getStaticProps versus utilizing the SWR package

One interesting feature of Next.js is the built-in "revalidate" option: export async function getStaticProps(context) { const data = await getData(); if (!data) { return { notFound: true, }; } return { props: { data }, reval ...

reactjsnext.jsswr

Tips for integrating material-ui dialog in scheduler?

Currently, I am utilizing react-big-scheduler for developing my application. However, I have encountered an issue when trying to replace it with a material-ui dialog. newEvent = (...) => { if(window.confirm('...'){ ... } When att ...

reactjsdialogmaterial-uischeduler

The ReactJS component is unable to resolve the specified domain name

Whenever I utilize a component like const React = require('react'); const dns = require('dns'); class DnsResolver extends React.Component { componentDidMount() { dns.resolve('https://www.google.com', (err, addres ...

javascriptreactjs

Refreshing the page in Next.js causes issues with the CSS classNames

I am currently in the process of migrating a React SPA to Next.js, and I am relatively new to this framework. The issue I am encountering is that when I initially load the Home page, everything appears as expected. However, if I refresh the page, incorrect ...

javascriptcssreactjsnext.jscss-modules

Alteration of Content Height Input

I have designed a layout that I am excited to experiment with more in the future. Here is the current structure of my HTML: <!DOCTYPE html> <html> <head> <title>Title</title> <link rel="stylesheet" type="text/css" hre ...

htmlcss

IE8 - Unable to use rgba()

I'm currently facing an issue with RGBA() manipulation in jQuery while using IE 8. Here's the code I have so far: $('.set').click(function (e) { var hiddenSection = $('div.hidden'); hiddenSection.fadeIn() . ...

jquerycssinternet-explorer

Unable to rectify the installed npm module issue

I removed the @toast-ui/react-image-editor package from my react app's server side thinking it needed to be on the client side. After installing it on the client side and restarting the app, it could not be found. Here is a basic overview of my folde ...

node.jsreactjsnpmtoast-ui-image-editor

What can I do to ensure that the selectInput choices in Shiny are easily accessible and visible to the user?

When running the code provided below, I encountered an issue where the options in the selectInput() were partially blocked by the bottom edge of the wellPanel(). This problem is illustrated in the image below. Users had to adjust the mouse wheel to see all ...

htmlcssrshinyselectinput

My API is feeding data to the Material UI CardMedia image

Has anyone encountered a similar error while using the CardMedia API provided by Material-UI? I am currently utilizing the Card & CardMedia components from material-ui to display data fetched from an api. However, I am facing difficulty in displaying ...

javascriptreactjsmaterial-ui

Pictures Unavailable to Show in Table

I've been working on a project where I need to insert some images into a table. Usually, this isn't an issue for me. However, today when I added the images to the table, all I see is a square border with the alt text inside it. I'm confident ...

htmlcss

Receiving a blank array from the firestore database

I have written a code for the LeftBar Component where I am trying to retrieve data stored in the "contacts" document in Firebase. However, I am getting an empty array and I'm not sure why this is happening. Additionally, I would like to know how to ac ...

javascriptreactjsfirebasegoogle-cloud-firestore

Add a blur effect to a specific region of an SVG image

I have a complex, dynamic SVG image created using jQuery SVG. I want to create a "popup" area that appears on top of all SVG elements in the canvas. To achieve a modern translucent iOS7 style, I would like to add a blur filter to everything beneath the pop ...

jqueryhtmlcsssvgsvg-filters

Challenges encountered during the execution of React tests: Enzyme, Jest, and React integration

Encountered an error while running tests: FAIL src/components/common/user/UserMenu/__tests__/UserMenu.test.js ● Runtime Error Error: Failed to get mock metadata: /redacted-directory/node_modules/core-js/library/modules/_global.js See: http://facebook ...

javascriptreactjskarma-runnerjestjsenzyme

The tag dimensions are not displaying correctly

I've successfully developed a reusable heading component for my Next.js application. While debugging, it correctly displays the tag name, but unfortunately, there is no visual difference in styling at any level of tags. import React from 'react&a ...

reactjsnext.jstailwind-css

React.js: The specified element type is not valid:

I am currently working on a sample project using react.js in Visual Studio 2019 Here is my Index.js file: import 'bootstrap/dist/css/bootstrap.css'; import React from 'react'; import ReactDOM from 'react-dom'; import { Provi ...

javascriptreactjsmaterial-ui

Function for testing global variable stub in JavaScript

Currently, I am in the process of writing Unit tests for a React application. Within the page header, the tracking library 'mixpanel' is inserted between <script> tags as outlined in their documentation: . The documentation states that "Th ...

javascriptunit-testingtestingreactjssinon

Guide to leveraging clsx within nested components in React

I am currently using clsx within a React application and encountering an issue with how to utilize it when dealing with mappings and nested components. For instance: return ( <div> <button onClick={doSomething}>{isOpened ? <Component ...

javascriptcssreactjstypescriptclsx