What is causing the Chrome Dev Tools to malfunction when using these CSS pseudo selectors?

Upon closer inspection, I realized that the issue with Chrome Dev Tools not live editing CSS was caused by the following lines of code:

@media (max-width: 767px) {
 .projects-* .v-center.row {
    display: block;
    width: auto;
  }
  .projects-* .v-center.row > * {
    display: block;
    vertical-align: baseline;
  }
}

Any CSS written after these lines would only show up in the Chrome Dev Tools inspector as:

 styles.css:1

I'm not sure if there is something fundamentally wrong with this CSS or if it's just a glitch in Chrome. Any insights?

Answer №1

Chrome devtools are not being intentionally disrupted; they simply do not recognize invalid selectors like .projects-*. Instead, try using a selector such as

*[class*='projects']

A CSS linter would have easily caught that mistake.

It seems that devtools might be assuming the entire file is corrupted, which could explain why it's preventing you from live-editing the rest of the rules.

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

The alignment issue arises when the browser is resized

Something seems off with my images. They appear correctly when I first open the browser, but if I resize it, they go all wonky. Refreshing the page fixes it, but if I open a larger browser window and then make it smaller, it messes up again. It's puzz ...

Tips for making slanted lines using CSS

Can this image be created using CSS and/or Bootstrap 4? https://i.sstatic.net/ajzk6.png ...

How to truncate text in a cell of a Vuetify data table using CSS styling

Is there a way to truncate text in a cell using CSS without it wrapping around or overflowing? The ideal CSS code should include: .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } However, the current implementation caus ...

Separating content beautifully with a vertical divider in Material UI's Appbar

Trying to incorporate a vertical Divider component within my Appbar in material-ui has proven to be quite challenging. Despite following a solution recommended on Stack Overflow, the issue persists and I am unable to resolve it: Adding vertical divider to ...

Issue with the initial element in CSS and the cause remains a mystery

"first of type" dont like to work: .elements { width:70%; margin:0 auto; display:flex; flex-direction: column; .addElement { width:280px; text-align: center; border:1px solid black; font-family: ...

Overlapping background images of flex elements in Safari

This webpage is designed as a single-page layout using Gatsby: <div className='mainContent'> <section className='contentSection'> <h1 className='header'>Heading</h1> <div c ...

Steps for rearranging the Bootstrap carousel

I am looking to rearrange the carousal indicators so that they show up below the caption. You can view a demonstration of the carousel in action by visiting the following fiddle: <pre> https://jsfiddle.net/w1jjeh7L/ </pre> My goal is to a ...

A single pixel border surrounding an odd number of divs

I've been struggling with a persistent issue and I'm determined to find a solution. My goal is to achieve the following design using css: https://gyazo.com/c8ae39ebc4795027ba7c1067a08d3420 Currently, I have an uneven number of divs styled as fo ...

Place the menu on top of the div by adjusting the z-index

Hey there, I'm working on a project and I need help with an issue. You can check out the example page here: If you try to open the menu and click between "list" and "new ads", you'll notice that you're actually clicking on the dropdown se ...

Issue with loading Angular CSS files arises when managing two partials using a single controller

I am currently developing a web application using the MEAN stack. My project utilizes Bootstrap as the CSS library, with some CSS overrides present in two of my own files named "app.css" and "mio.css". Everything was running smoothly until I encountered an ...

Creating a CSS triangle that expands the full width of the page

Here is a triangle: #header-triangle-right { position: absolute; float: right; top:0px; right:0; z-index: 0; overflow: hidden; width: 0; height: 0; border-top: 400px solid transparent; border-right: 1000px solid #00 ...

Revamp the design of the Google image layout

I am trying to replicate the layout of a Google search results page. My goal is to have a full-width div appear on screen when an image is clicked, with a small triangle at the bottom of the clicked image. I attempted to place the img inside another div, ...

Mobile operating system "curtain" design on Android

I want to design a menu that functions similar to the Android notification drop-down section (where you pull down from the top). This menu should have its own scrollbar, incorporate images, and have smooth animations when scrolling down instead of jumping ...

Can a circular design incorporating an arrow and gradient background be created?

I'm looking to create a circular design with an arrow and a gradient inside that can adjust dynamically based on screen resizing. I know it can be done using an image, but I'm wondering if it's possible to achieve this effect using just a si ...

What is the best way to update the color of an fa icon when an error message is displayed using PHP

I am facing an issue with my form where error messages are displayed on certain input fields. The error messages show up correctly, but I want to change the color of the "fa" icon in the field when its corresponding error message appears. My goal is to ma ...

Any tips on how to personalize the loading animation for single pages using CSS and GIFs?

presentLoading(message) { this.loading = this.loadingCtrl.create({ dismissOnPageChange: false, spinner:'hide', content:`<img class="load" src="assets/dual.gif" />`, }); this.loading.present(); } Hello there! I am working with the ...

Concealed text hidden beneath a Sticky Navigation Bar (HTML/CSS)

I'm in the process of creating a simple website that includes a sticky Navigation Bar. However, I'm encountering an issue where text added to the website is being hidden behind the Navbar. Is there a way for me to adjust the positioning of the te ...

Tips for creating a layout featuring images and text placed next to each other in harmony

Is it possible to replicate this section layout using Bootstrap? Take a look at Image 1. ...

Image Link for Facebook

Just finished designing and launching this website: However, when our administrators try to share a link on Facebook, the post shows an icon that doesn't quite match our company branding: Is there any way to change the icon displayed? The 'v&ap ...

Is it possible to modify the color of an input tag in a form when it is selected?

I'm currently developing a contact form for my website with bootstrap. The form automatically scrolls to any unfilled required field when the user clicks submit, and highlights it with a blue border. However, I want the border color to change to red i ...