Tips for excluding two attributes when styling a CSS calendar selection

Let's say I have a table structured like this:

<td class="search-unit-custom-control-calendar-day search-unit-custom-control-calendar-day--not-this-month">
    <time class="search-unit-custom-control-calendar-day__number">--</time>
</td>

<td class="search-unit-custom-control-calendar-day search-unit-custom-control-calendar-day--unavailable">
    <time class="search-unit-custom-control-calendar-day__number">--</time>
</td>

<td class="search-unit-custom-control-calendar-day search-unit-custom-control-calendar-day">
    <time class="search-unit-custom-control-calendar-day__number">--</time>
</td>

<td class="search-unit-custom-control-calendar-day search-unit-custom-control-calendar-day">
    <time class="search-unit-custom-control-calendar-day__number">--</time>
</td>

<td class="search-unit-custom-control-calendar-day search-unit-custom-control-calendar-day">
    <time class="search-unit-custom-control-calendar-day__number">--</time>
</td>

I'm trying to figure out how to select only the available dates. Here's the code snippet I am using for that:

`tbody.search-unit-custom-control-calendar__table__page tr td[class*=calendar-day-]:not([class*='unavailable'] && [class*='--not-this-month']))`

However, this doesn't seem to be working as expected. Can anyone provide some guidance on this issue?

javacssselenium-webdriver

Answer №1

In my opinion, the solution is to include a second :not statement rather than combining them with an &&.

Here's how you can do it:

tbody.search-unit-custom-control-calendar__table__page tr td[class*=calendar-day]:not([class*='unavailable']):not([class*='--not-this-month'])

You can also check out this JSFiddle

Answer №2

The css selector is incorrect; the parent selector td[class*=calendar-day-] excludes all td elements that do not have a composed class (no dash after the class name), leaving out the four last cells. You can see a working example 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

Picture in the form of a radio button

Is there a way to use an image instead of a radio button in my AngularJS form? I have managed to hide the radio button using CSS, but it disables the checked event. How can I make the image clickable? position: absolute; left: -9999px; Here is the code s ...

javascripthtmlcssangularjs

Arrange grid layout with border gutters and central icon

.hero__grid { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto 1fr; } .vertical-line { height: 169px; width: 0.5px; background-color: red; } .horizontal-line { width: 300px; height: 0.5px; background-colo ...

htmlcsslayoutcss-grid

Customized SQL query using a prepared statement

My search page includes various search criteria such as Employee Name, Employee ID, Date of Joining, Department, and more. Users can input one or multiple search criteria, leading to a need to query the database for the search results. When using plain JD ...

javasqlprepared-statement

Tips for utilizing MockMvcResultMatchers.jsonPath

String url = mockUrl; MvcResult result = this.mockMvc.perform( MockMvcRequestBuilders.get(url)) .andExpect(MockMvcResultMatchers.status().isOk()) .andExpect(MockMvcResultMatchers.content().contentType("applicati ...

javaunit-testingmockitojsonpath

How to utilize the ternary operator efficiently to evaluate multiple conditions in React

Is there a way to change the style based on the route using react router? I want the description route to display in orange when the user is in the description route, white when in the teacher-add-course route, and green for all other routes. However, th ...

javascripthtmlcssreactjs

Why is there a delay in processing queries and requests in the MEAN Stack?

Recently, I've been diving into Node.js and experimenting with building a web app using the MEAN stack. One particular issue I encountered involved sending an array of strings (e.g., ["one", "two", "three"]) to the server side. In response, I attempt ...

javaajaxnode.jsmongodbweb

What is the best way to create a scrollable table that extends to 100% of the available width within its container, without taking up the

In the application, there is a collapsed sidebar on the left labeled "sidebar-left" and a container on the right with various types of content labeled "content." The issue arises with the width of this container, as it needs to take up 100% of the remainin ...

htmlcssbootstrap-4

Is there a way to prevent my Header links from wrapping during window size testing?

https://i.stack.imgur.com/YTc3F.png The image above showcases my standard header layout, while the one below illustrates what occurs as I resize the window. https://i.stack.imgur.com/re44T.png Is there a specific CSS solution to prevent the Text navLink ...

cssmaterial-ui

Using the scroll feature within the tooltip component in React with @material-ui/core/Tooltip can cause the entire page to

I am currently working with a tooltip created using the @material-ui/core/Tooltip library, and it is functioning correctly. You can see an example of the tooltip in action at this link: https://codesandbox.io/s/kgccc. https://i.stack.imgur.com/fMgGb.png ...

cssreactjsscrollmaterial-uitooltip

Having trouble getting AngularJS ngCloak to function properly?

My post category page is supposed to display a message if there are no posts. However, the HTML appears briefly when the page loads and then hides. I thought using ngCloak would solve this issue, but it doesn't seem to be working for me. Here's t ...

javascripthtmlcssangularjs

Error encountered while utilizing the 'Select' function in Selenium with Java due to an 'UnexpectedTagNameException', where the Element was expected to be a "select" but was actually a "div"

I am facing an issue with the drop-down selection in this form. https://i.stack.imgur.com/g3wxg.png In the image above, I am trying to select 'Borrowing Capacity' and I have written the code for it public static void main(String[] args) t ...

javaseleniumxpathwebdriverwebdriverwait

Switch between including 'light' or 'dark' styles using Javascript?

I am currently working on a project where I aim to incorporate a dark mode toggle feature. To maintain organization and scalability, I have chosen to implement the SASS (.scss) architecture rather than plain CSS. My plan is to utilize variables within my ...

javascripthtmlcsssass

Error converting JSON to POJO for a variety of data types

Encountering an issue when converting JSON data to POJO using Gson. com.google.gson.JsonSyntaxException: java.lang.IllegalStateException: Expected BEGIN_ARRAY but was STRING at line 1 column 119 The JSON structure is as follows: { "success":tru ...

javajsongsonjsonschema2pojo

The div seems to be resistant to centering no matter the effort. Applying padding doesn't seem to be the solution, and even setting

I often come across this question but I can never seem to find the answer when it comes to padding or margin. It's strange that I'm having trouble properly centering the ul element within the div, especially considering that the div needs to be i ...

htmlcsshtml-listscenterpadding

What is the best way to delete a CSS class from a specific element in a list using React?

I need to implement a functionality in React that removes a specific CSS class from an item when clicking on that item's button, triggering the appearance of a menu. Here is my code snippet. import "./Homepage.css" import React, { useState, ...

javascriptcssreactjs

Tips for choosing a specific element within a div using selenium

When scraping a webpage, I am faced with the challenge of selecting a specific element that appears multiple times in different positions. Here is how it looks: <div data-v-513c5331="" class="flex text-xs border-b h-9">...</di ...

selenium-webdriverweb-scrapingscreen-scraping

An issue occurred with accessing window handles in Selenium WebDriverJS

I have encountered a similar question, but the provided answer is not working for me. Unfortunately, I do not have enough reputation to comment or request clarification on that post yet. My setup involves JavaScript, WebDriverJS, and NodeJS. The specific ...

javascriptnode.jsselenium-webdriver

The screen-responsive navigation bar is experiencing functionality issues

I am facing an issue with my navigation bar on both desktop and mobile. When I maximize the window while the mobile navbar is open, it disappears as expected but the desktop navbar does not appear. I am using a bootstrap template and I am unsure if solving ...

javascripthtmlcss

When the right-aligned navbar dropdown menu in Bootstrap 4.0.0 is opened, it extends beyond the viewport

Is there a solution in Bootstrap 4.0.0 to align the right edge of the dropdown menu with the right side of the toggle button? Here's an image showing the current layout: https://i.sstatic.net/3ccIE.png Code: <nav class="navbar navbar-expand-lg n ...

htmlcsstwitter-bootstrapbootstrap-4

Adjust the checkmark color of MUI Checkbox

When using Material UI's MUI library for React, I encountered an issue with the checkbox checkmark color. By default, the checkmark takes on the background color of the container element, which is great for light backgrounds but not ideal for dark one ...

cssreactjscheckboxmaterial-ui