VSCode is indicating a CSS error, requesting an at-rule or selector

I tried to implement a piece of CSS code I found on a website, but I'm encountering an error in this particular section

.pricing-table:hover{
  box-shadow: 0px 0px 19px -3px rgba(0,0,0,0.36);
  /*issue starts from this line*/
  .pricing-table__button{
    padding-left: 0;
    padding-right: 35px;
    .pricing-table__button:before{
      top: -80%;
      transform: rotate(0deg);
      width: 100%;
    }
    .pricing-table__button:after{
      opacity: 1;
      padding-right: 15px;
    }
  }
}

Can anyone identify what might be causing the problem in the CSS code?

source: https://codepen.io/DigimadMedia/pen/qZdMzd

css

Answer №1

Your question contains code written in SASS that needs to be converted to regular CSS.

Here is the equivalent CSS code:

.pricing-table:hover{
  box-shadow: 0px 0px 19px -3px rgba(0,0,0,0.36);
}
.pricing-table:hover .pricing-table__button:before{
  top: -80%;
  transform: rotate(0deg);
  width: 100%;
}
.pricing-table:hover .pricing-table__button:after{
  opacity: 1;
  padding-right: 15px;
}
.pricing-table:hover .pricing-table__button{
  padding-left: 0;
  padding-right: 35px;
}

Answer №2

Make sure to use the following format:

.pricing-table:hover{
  box-shadow: 0px 0px 19px -3px rgba(0,0,0,0.36);
  }

.pricing-table__button{
    padding-left: 0;
    padding-right: 35px;
}

.pricing-table__button:before{
      top: -80%;
      transform: rotate(0deg);
      width: 100%;
}

.pricing-table__button:after{
      opacity: 1;
      padding-right: 15px;
}

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

What causes the burger dropdown to be concealed by additional content?

While viewing my menu on an iPhone SE in responsive mode, I noticed that all of my burger menu items are hidden except for the one that fits perfectly in the space between my header and main content. I am using Mantine with NextJS, and my layout structure ...

cssreactjsnext.jsoverflowmantine

The crossIcon on the MUI alert form won't let me close it

I am facing an issue with my snackBar and alert components from MUI. I am trying to close the alert using a function or by clicking on the crossIcon, but it's not working as expected. I have used code examples from MUI, but still can't figure out ...

javascriptcssreactjsmaterial-ui

The feature of Jquery click and cursor: pointer only focuses on a single element at a

Recently, I created a navbar that includes a dropdown feature. I encountered an issue where I wanted the dropdown to show up when clicking on the navbar-profile class (which contains the profile picture, name, and chevron icon) in the top right corner. Ho ...

jqueryhtmlcss

What could be the reason for Firefox failing to display the border of a table when the tbody is

If Firefox isn't displaying table cell borders correctly in the presence of an empty tbody, a simple solution is to use the pseudo selector tbody:empty {display:none;} to hide the empty tbody element. This will ensure that everything is rendered as ex ...

cssfirefoxborder

Tips for altering the distance between dots on a line

.ccw--steps { margin: 10px auto; position: relative; max-width: 500px; } .ccw--step-dot { display: inline-block; width: 15px; border-radius: 50%; height: 15px; background: blue; border: 5px solid #e8e8e8; position: relative; top: -8p ...

htmlcss

Encountering difficulties with the mobile display of a Wordpress theme

I am currently working with the megashop theme on WordPress and I have a few queries that need addressing: Is there a way to modify a specific setting exclusively for views smaller than desktop size, without impacting the desktop view? For example, the m ...

phphtmlcsswordpresstwitter-bootstrap-3

Inconsistency in field generation in WordPress Contact Form 7 causing issues

After utilizing the WordPress plugin Contact Form 7 to put together a straightforward questionnaire, I discovered that two fields, Your Birthday and Your Email, were mistakenly generated on top of one another in the final output. You can take a look at th ...

htmlcsswordpressforms

Learn the steps to Toggle Javascript on window resize

Is there a way to toggle Javascript on and off when the window is resized? Currently, resizing the window causes the navigation bar to stick and remain visible above the content. <script> if ( $(window).width() <= 1200 ) { }else{ $('nav& ...

javascriptjqueryhtmlcss

Ways to retrieve element(s) and delete a specific class located in the DOM structure

This is my first time using stackoverflow and posting a question here! :] Can someone guide me on the best way to write JQuery code for this particular task? Task: My goal is to remove the 'active' CLASS from a nav element when it is active: ...

javascriptjqueryhtmlcssdom

Color-matching cells must be positioned in the same column within the gridbox consecutively

In my current project, I am dealing with a large number of sections. Each section contains one or two rows with columns ranging from 2 to 15, all of equal width. The cells of the same color are placed in the same column, and the layout looks like this: ht ...

htmlcssflexboxgrid-layout

"Customize the appearance of ng-bootstrap datepicker selection with a unique

Having trouble with the ng-bootstrap datepicker when selecting style for month and year. https://i.sstatic.net/grlK6.png The issue seems to be with the select style. select[_ngcontent-c21] { -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 0 .5re ...

cssangularng-bootstrap

Enhance your PrimeVue experience with the power of Tailwind CSS

After installing PrimeVue, I encountered an issue where the component style was not working, but Tailwind CSS was functioning correctly. It seems that when I install Tailwind first, it works fine until I add Primevue's button component, which then cau ...

htmlcssvue.jstailwind-cssprimevue

The jQuery onClick function functions effectively for the initial two clicks; however, it ceases to

I am currently experimenting with jQuery to dynamically load a specific div from another page on my server into a designated section on the existing page. While the code is successfully functioning for the first two clicks on the website, it fails to work ...

javascriptjqueryhtmlcss

Display Bootstrap modal upon page load automatically

Is there a way to automatically trigger the Bootstrap model upon page load? I attempted implementing the following code in my index file: <script type="text/javascript> $(window).load(function () { $('#myModal').modal('sh ...

htmlcsstwitter-bootstrap

Div overlaps div on certain screen dimensions

When the screen size falls within a specific range, typically in the low 1000s, there is an issue where my content div overlaps completely with the navigation div. It appears as if both divs are positioned at the top of the page. Below is the HTML code sn ...

htmlcss

Is there a way to modify the size and color of a specific word in a CSS animation?

As a newcomer to CSS, I am exploring ways to change the font size and color of a specific word in my sentence after an animation. My initial attempt was to enclose the word within a span class like this: <h2>I'm <span style = "font-size: ...

htmlcss

Deactivate the focus state when hovering over different items in the navigation bar

Currently facing an issue with my Navbar items having underline animation on hover. Once clicked, the animation persists. However, when hovering over a neighboring navbar item, the underlines appear next to each other, creating the illusion of one long lin ...

javascriptjquerycssnavbar

The blinking cursor in Google Docs is known as "kix-cursor-caret."

Although I adore Google Docs, I can't help but find the blinking cursor a bit too distracting for my liking. It seems that the latest version of Google Docs fails to comply with the operating system's setting for displaying a solid, non-blinking ...

javascripthtmlcssgoogle-docs

Customize the appearance of semantic-ui-react components with hover effects

When I assign a specific className to components like <Segment className="Change" color='blue' inverted></Segment> and then in my CSS I apply the following: .Change:hover{ background-color: black; //or any other hover effect } N ...

cssreactjssemantic-uisemantic-ui-react

Constantly centered div

I'm dealing with a situation like this: .center_position_div{ width:100%; background-color:green; display: flex; flex-wrap: wrap; } .show_running_exam { width: 22%; background-color:aliceblue; margin-left: 1%; margi ...

htmlcss