Is it possible to enable auto-completion for IDs in a separate CSS file using WebStorm 7?

I am new to using WebStorm 7 and currently working on building a simple HTML/CSS website. Initially, I included my CSS within the HTML file using the style tag, but now I have decided to move it to a separate file.

Auto completion is functioning for all html and css syntax, except when it comes to ID's (specifically custom names) in my CSS classes.

In my HTML file, I have:

<div id="my_div">
</div>

When I type div#my in my CSS file, I expect "my_div" to show up in the auto-completion list, but it does not. The CSS file is correctly interacting with the HTML, producing the desired result, but I encounter issues with auto completion.

It is odd that after referencing an ID once in my CSS, it appears in the auto-completion suggestions if referenced again. However, this is not very helpful since most IDs are typically used only once.

Previously, this functionality worked when writing CSS inside the <style> tag, so I don't understand why it is not working in a separate file?

Thank you

Answer №1

In the world of CSS selectors, completion works in one direction only: from CSS to HTML. When working on your HTML file, you'll have access to a list of all selectors defined in your CSS files, but those written directly in the HTML won't be available when editing CSS. More details can be found at this link.

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 background size of each list item is determined by the size of the item

I'm trying to create a menu using an unordered list, where each item has a background color. However, I want the width of each item to be smaller than the list itself and aligned to the right. Any ideas on how to achieve this? Here is the HTML code: ...

In Chrome, there is a single pixel missing below the <dl> element

While my website's basic list looks great on Firefox and IE, there seems to be one missing pixel line in Chrome. Check out this JsFiddle link shared by Jared in the comments for reference. If you're not seeing the missing line, try adjusting th ...

Leveraging python's BeautifulSoup library, one can easily implement HTML selection

Recently, I've started diving into Automate the Boring Stuff and exploring how to create my own programs. Currently, I'm experimenting with beautiful soup's 'select' method in order to extract the value '33' from this cod ...

When the click event is triggered, the second function guess() does not execute

I am currently developing a number guessing application. It consists of two functions, the first one called startGame() works correctly (it receives the maximum number and then disappears by adding the hidden class). However, the second function that is ...

The outline none property on the Material UI IconButton is malfunctioning

Attempting to style with CSS as shown in the following example: <CustomColorIconButton> <DeleteForeverIcon /> </CustomColorIconButton> const CustomColorIconButton = withStyles({ root: { color: "#ff8833", ...

Select a Date: Input for Date Selection

Is it possible to restrict the selection of certain days using HTML date input validation? Some booking websites have a feature where an interactive calendar only allows users to select specific dates for events, while others are greyed out and cannot be c ...

The jQuery keyup event initiates multiple times, increasing exponentially with each trigger

I recently added a search bar with auto-complete functionality to my website. The search bar queries the database for elements that begin with the text entered by the user as they type. Although it works well, I noticed that every time the user inputs ano ...

Transform an iOS WebView into a user-friendly ebook reader

Typically, in a webview, you can scroll vertically like a browser if the page is too long. However, I am interested in transforming this experience to mimic an ebook reader. Rather than scrolling down, I would like users to be able to swipe to the next pag ...

The server sends a Status=304 response to one browser's GET request, while providing a 200 response to another browser's request

My focus right now is on troubleshooting my .htaccess file, in which I have the following code: <FilesMatch "\.(html|swf)$"> <IfModule mod_headers.c> Header set Cache-Control "no-cache, public" </IfModule&g ...

Delicate seams break up the different sections of the webpage

I'm facing an issue with my website where thin lines are appearing between each section when previewed in Safari and Chrome, but not in Firefox (as shown in the images). I've checked the CSS code for each section in Dreamweaver, where the lines d ...

What is the best way to navigate back to the top of the page once a link has been clicked?

One issue I'm facing is that whenever I click on a link in NextJS, it directs me to the middle of the page: <Link href={`/products/${id}`} key={id}> <a> {/* other components */} </a> </Link> I believe the problem l ...

IE7 is not applying the conditional CSS styles to content loaded through AJAX

I am currently tackling some challenges with IE7 compatibility in a Rails application that I am developing. It appears that CSS styles implemented from a stylesheet applied with a conditional comment are not being rendered properly when using HAML like thi ...

Creating image links in this jQuery Slider plugin: A beginner's guide

Currently, I am attempting to insert links into each photo within the slider. While I have successfully done this on two other websites, I am encountering difficulties due to variations in the code structure. <a href="http://www.google.com I have expe ...

The ability to use the backspace and Ctrl + c (Copy) functions is restricted in input fields on FireFox

I have a form with input fields designed using semantic UI. I need the input field to only accept numbers, remove spaces, and allow copying from it using ctrl +c. After some investigation, I found this jQuery code that seems to satisfy my requirements per ...

Using Angular, I am passing a controller variable as a parameter to a custom filter in the HTML `ng-repeat`. This parameter will be populated within a function so that

At the moment, my setup includes a controller, a filter file, and some HTML. Currently, I am using ng-repeat in the HTML with custom filters that I have created based on the filter being used. For example: ng-repeat="p in persons = (person | toArray | fil ...

What is causing the qtip tooltip to show up on buttons with different ids?

I have a requirement to display tooltips only for specific buttons and not for others. I am facing an issue where the tooltip intended for the TAB button is showing up when hovering over other buttons like FOO and BAR as well. Could this be due to them sha ...

What characterizes a dynamic webpage?

Can someone help me figure out how to determine the number of dynamic pages on a website? I'm not sure if the presence of a form means the page is dynamic. Any insights would be greatly appreciated. Thank you in advance for your assistance. ...

Align the dimensions of the table to match with the background image in a proportional

Seeking a contemporary method to match a table with a background image, ensuring all content scales proportionally. Mobile visibility is not a concern for this specific project. Using Wordpress with a starter bootstrap theme. Check out the code on jsfidd ...

Troubleshooting: CSS3 transform issue unresolved

I'm attempting to add a 10-degree rotation to my menu items. While this CSS effect works in Firefox, I can't seem to get it to work in Chrome and Safari. I already know that IE doesn't support this particular CSS3 property, so that's no ...

What is the best way to include a variable or literal as a value in styled components?

When it comes to managing various use cases, I always rely on props. However, I am currently facing a challenge in changing the border color of a styled input during its focus state. Is there a way to utilize props for this specific scenario? Despite my f ...