When you open the HTML file in Eclipse, the occurrence of ". {" is highlighted as an error

After updating my Eclipse to version 2021-03, along with JDK 1.8 and Tomcat 9, I encountered an issue with a CSS error in the html file. The error specifically points to ". {" and displays "identifier expected". Interestingly, when I close the file, the error marker disappears.

 body {
        padding-top: 40px;
        padding-bottom: 40px;
        background-color: #f5f5f5;
      }
      . {
        max-width: 370px;
        padding: 1px 1px 1px;
        background-color: #fff;
        border: 1px solid #e5e5e5;
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
                border-radius: 5px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
                box-shadow: 0 1px 2px rgba(0,0,0,.05);
      }
htmlcsseclipse

Answer №1

After the period, it's anticipating a classname. If you intend to apply css to the entire document, you may utilize:

*{
        max-width: 370px;
        padding: 1px 1px 1px;
        background-color: #fff;
        border: 1px solid #e5e5e5;
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
                border-radius: 5px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
                box-shadow: 0 1px 2px rgba(0,0,0,.05);
      }

The CSS selector . is utilized for classes and therefore requires a classname immediately following it. For additional information, refer to MDN's detailed explanation on this topic https://i.sstatic.net/9FJ6f.png

Furthermore, here is a real-time log screenshot from vscode provided for your convenience: https://i.sstatic.net/ghMTV.png

If you encounter an "identifier expected" error, ensure that a valid classname follows the . selector. When you format it like so .class_name{}, the error should disappear.

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

Is it best practice to display a DIV once it is no longer visible after scrolling down?

Upon opening my website, an information box (div) appears on the screen. However, when the user scrolls down and the box is no longer visible, I want it to always appear in the top right corner while scrolling. I have figured out how to keep it visible at ...

javascriptcss

PayPal form without encryption

Once upon a time, I recall creating a button in Paypal which provided me with a standard HTML form. However, now everything seems to be encrypted. Is there a way to retrieve an unencrypted format? I need to be able to manually adjust the price using jQuer ...

phphtmlencryptionpaypal

Strategies for Resolving Table Alignment Problems using HTML and JavaScript

I am struggling to figure out how this dashboard will function as it is not a live website, but rather a tool that pulls data from a chemical analysis program and displays it in a browser view. My main issue is aligning two tables at the top of the page ...

javascripthtml

Issue with CSS specific to Internet Explorer

Does anyone have any insight into a glitch I'm experiencing on Internet Explorer? Here is an example page: When viewing in IE without compatibility mode, all the Cufon (js font replacement) headings disappear. Enabling compatibility mode causes pagi ...

htmlcssinternet-explorer

Problem with CSS inline-block bottom margins

How can I resolve the issue with inline-block in CSS causing a 1px whitespace? Changing word-spacing or letter-spacing does not solve the margin-bottom problem. Here are snippets from my HTML files: <!DOCTYPE html> <html lang="en> <head> ...

cssmargin

Outline a table element without altering the dimensions of the cell

When creating a diagram in an HTML table, I encountered a challenge. The TD elements have fixed dimensions, and I wanted to highlight this div with a border or circle. However, when I attempted to do so using CSS, it deformed the div. I couldn't use ...

javascripthtmlcssweb

Help needed with debugging CSS for IE6 >_<

I have been working on the following website: www.darksnippets.com While the design looks good on Firefox and Chrome, it appears terrible on IE6. For example, on the home page and other pages like , the width is too wide in IE6. I've been unable to ...

cssinternet-explorer-6

When the React-bootstrap Popover arrow is oriented vertically, the arrow colors appear to be inverted compared to when it

Utilizing a react-bootstrap Popover component, I have implemented custom styling for the arrow with a gray color and 50% opacity. The CSS code that enables this customization is as shown below: .popover .popover-arrow::before, .popover .popover-arrow::afte ...

cssreactjsbootstrap-5

Require assistance with setting a marker for location tracking

Can someone assist me in developing a geo-location marker? Here is the code snippet I am currently using: var latLong = response._source.misc.latLong; console.log(latLong); var getaddress = response._source.misc.address; showPosition(latLong ...

jqueryhtmlelasticsearch

What is preventing this hover from activating the text animation?

Looking to create a hover effect in an CMS platform that only allows internal CSS styling. Despite the absence of a head tag, this CMS recognizes style tags and automatically inserts them into the template. After attempting to export as HTML to troublesho ...

htmlcss

What is the relationship between html, body, and window when scrolling through code?

I've been working on adding a scroll-to-top button to my website. After doing some research online, I came across this code snippet: $('html, body').animate({scrollTop:0}, 'slow'); It's interesting that they are trying to scr ...

javascripthtmljquerycss

Bootstrap 5's gutter-x class is causing alignment issues with divs

My div alignment is getting thrown off due to the default .row class. The margin_left and right call it includes add gutters that cause borders to overlap my div. Although I have disabled gutters in this particular element, it leads to problems elsewhere o ...

htmltwitter-bootstrapbootstrap-5

Outformatted Layout in HTML Email on Outlook, Post-Image Loading

When I send HTML emails in Outlook, I encounter a problem. Initially, the images do not appear when I view the newsletter, but the table layout is fine. However, once I download the images and they fit perfectly in their cells, the layout suddenly breaks ...

htmlcssemailoutlooknewsletter

Utilizing a range input (slider) to extract data of importance

When dynamically adding a slider to a page using a specific string, like the one shown below: "<input type=\"range\" name=\"aName\" min=\"1\" max=\"9\"/>"; After appending it to the page with pure JavaScript, ...

javascriptjqueryhtmlrangeevent-delegation

CSS Animation Effect on Transparent PNG Image

Today, while working on my website, an interesting CSS effect came to mind. I vividly remember seeing it a few months ago, but unfortunately, I couldn't find it among my bookmarks. The website featured a captivating design with a prominent logo that ...

cssanimationcolorsspinning

Construct a structure containing the key/value pairs of cells within an HTML table row using JavaScript

I'm completely new to JavaScript so please be patient with me; I'm not even sure if I'm searching for the solution correctly. Despite spending hours googling and experimenting, I still can't get it to work. My issue is related to an HT ...

javascriptjqueryhtmlarrayshtml-table

Can you explain the distinction between the various markup languages?

I am confused about the difference between these two markup examples. <div class="pic"> <img src="http://www.lorempixel.com/333/333" alt=""> </div> css .pic { width: 600px; background: red; } Now I can see my background, but when ...

htmlcss

Troubleshooting jQuery Selector Issue with Multiple :not Selectors - Why Isn't It Working as Anticipated

To close my lightbox by clicking the red zone, visit this link: The HTML structure of the lightbox is as follows: <div id="#lightbox" style="display:block;"> <div class="contents_lb"> <div class="img_box" style="margin-top: 74.5px; wid ...

jqueryhtmlcss

Utilizing cheerio to set outerHTML in HTML

Could someone kindly assist me with setting the outerHTML of an element using cheerio? I seem to be encountering some issues with this process. For example, let's consider the following HTML structure: <div class="page-info"> <s ...

javascripthtmlnode.jsnpmcheerio

Transform collapsible color upon materialize click

Is there a way to change the color of the collapsible header only when clicked? I'm struggling with adding the color inside the class element while calling the "connect" function. Can this be achieved? <div class="collapsible-header" onclick="conn ...

javascripthtmlmaterialize