Can you explain how the CSS hack *+html works?

While working on a project, I have encountered multiple rules that look like this:

* + html {
    /.../
}

Although I understand the purpose of using * and +, I am unsure about the significance of this particular construction.

Additionally, I came across another rule:

* html {
    /.../
}

I have not been able to identify where these rules are being implemented.

Considering that html is unique per page, wouldn't it make more sense to simply utilize the html selector? Is there some kind of mysterious reasoning behind this?

htmlcsscss-selectors

Answer №1

Discover unique CSS tricks specifically designed for Internet Explorer.

For further details, check out this resource:

Answer №2

As per the definition of selectors by W3C, the "E + F" selector is described as:

It matches any F element that comes right after a sibling element E.

You brought up the code snippet:

* + html

This snippet is supposed to target the html tag immediately following another element. However, since the html element usually serves as the first (root) element in an HTML page, there isn't any element before it. Hence, this rule does not apply to any specific element.

Unless, of course, for browsers that adhere strictly to the standard. The discrepancy lies in IE7 which does not follow the standard accurately and still applies these rules.

In essence, this serves as a CSS hack intended specifically for targeting IE7.

An alternative approach would involve utilizing conditional comments like so:

<!--[if lte IE 7]> <html class="ie7"> <![endif]-->

Hope this helps!

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

Remove elements generated by the .after method with Jquery

In my HTML file, I have a table with hard-coded column headers: <table id="debugger-table"> <tr> <th>Attribute</th> <th>Computed</th> <th>Correct</th> </tr> </table&g ...

javascripthtmljquery

Exploring JSONP data using AJAX

Tomorrow I have an exam on Web Design and I'm struggling to understand how to read JSONP responses with AJAX. While I can work with JSON and basic JSONP, I face issues when a callback function is involved. Let me illustrate this with two examples: F ...

jqueryhtmlajaxjsonp

Display only the labels of percentages that exceed 5% on the pie chart using Chart JS

I'm currently diving into web development along with learning Chart.js and pie charts. In my project, the pie chart I've created displays smaller percentage values that are hardly visible, resulting in a poor user experience on our website. How c ...

javascripthtmlcsscharts

Can you show me how to extract the html code from a website using python's requests module?

Attempting to retrieve an HTML file from the specified website: Inspecting the source in Google Chrome allows me to obtain the HTML without any difficulty. However, I aim to download multiple pages using Python requests. Unfortunately, when attempting to ...

pythonhtmlweb-scrapingpython-requests

What is causing the table to not be displayed in this Javascript program when it is used in a

I am currently experimenting with incorporating an infinite loop before the prodNum and quantity prompts to consistently accept user input and display the output in a table. Although the program is functional when executed, it fails to showcase the table ...

javascripthtml

Show basic HTML elements on a single page of an Angular Material web application

I am working on an Angular (6) web app with a customized theme using Angular Material. Currently, I am trying to incorporate a popup dialog that includes basic HTML elements like checkboxes, buttons, and inputs. Even though I have successfully displayed ...

htmlcssangularelement

Troubleshooting Flexbox in Internet Explorer 11: Issue with 100% width not functioning properly within nested flex containers with a 'column'

Is there a way to ensure that an image within nested flex containers has a width of 100% in IE11, even when the container has flex-direction: column? I've tried setting the width to 100% with a max-width of calc(100% - 0.1px), but unfortunately it doe ...

htmlcssflexboxinternet-explorer-11

Resolving Div Alignment Issues in Internet Explorer with jQuery CSS AddClass and RemoveClass

I've set up an HTML table with a hover highlight feature using jQuery and CSS. Here's how my hover event is structured: $('#' + element.id + ' tr:not(:first,[class="summary_row"])').die('mouseover mouseout').live(&a ...

jqueryhtmlcssinternet-explorer-9

Determine the present vertical measurement of the video

I am having trouble determining the actual height of a video element. Despite seeing in the developer tools that it is 384px, I am only able to retrieve a height of 342px. I attempted the following code snippet, but it only gives me the natural height, no ...

javascriptjqueryhtmlcsshtml5-video

Component template using Knockout.js and RequireJS for HTML widgets

Trying to implement the widget example for knockout from here. Unfortunately, I am having issues loading the template from an external HTML file using requirejs. ko.components.register('like-or-dislike', { template: { require: &apos ...

javascripthtmlknockout.jsrequirejs

Is there a way to implement this toolbar in Ionic Angular?

https://i.sstatic.net/sGd1o.png I am looking to replicate the toolbar shown in the image above using Ionic. As a beginner in Ionic development, I am finding it challenging to translate the design into code. I attempted to use a grid layout, but the varyin ...

javahtmlcssionic-frameworkionic4

Obtain the length of a sound file in .wav format

Can anyone suggest a way to incorporate a waveform or horizontal bar on a website that displays the duration of a WAV file in seconds using HTML text? For instance, for a 60-second WAV file: I'm open to any ideas. ...

jqueryhtmlweb-applicationsjquery-pluginshtml5-audio

Tips for extracting the chosen value from a dropdown list within a table cell using JavaScript

Here is an example of an HTML element: <td> <select> <option value="Polygon 47">Polygon 47</option> <option value="Polygon 49">Polygon 49</option> </select> </td> I am looking for a ...

javascripthtml

Ways to position a single item in the middle of a multi-column layout

I need help with aligning dynamic images in a 2-column layout. What's the best way to center a single image or collapse the columns when there's only one image? Currently, the single image is always placed in the left column. Is there a CSS-only ...

htmlcsscss-multicolumn-layout

HTML/JavaScript - Ways to show text entered into an input field as HTML code

One dilemma I'm facing involves a textarea element on my website where users input HTML code. My goal is to showcase this entered HTML code in a different section of the webpage. How should I approach this challenge? The desired outcome is similar to ...

javascriptjqueryhtmlcssnode.js

Are there any available tools for automatically creating CSS classes based on your HTML code?

Out of pure curiosity, I am wondering if there is a program or script that can automatically generate a style sheet (with empty values) based on the structure of your HTML document. Essentially, it would extract the IDs and classes you have set in your H ...

csshtml

The slider feature is malfunctioning on Internet Explorer version 8

Hello everyone, I am facing an issue with my website located at: http://210.48.94.218/~printabl/ When viewed in IE 8, the slider is not functioning properly (it is showing collapsed between the menu and product images section) The theme used for my site ...

jquerycsswordpressinternet-explorerinternet-explorer-8

How can I use JavaScript to consistently fetch the CSS-defined percentage setting for padding/margin instead of the pixel size?

How can I retrieve the padding set in CSS for a div with {padding:10% 10px 20% 10px;} using JavaScript, considering that window.getComputedStyle(myelement).getPropertyValue('padding'); returns different results? In Firefox, it shows as "10% 10px ...

javascriptjquerycss

By default, the first table row is displayed when using table grouping in AngularJS

I am attempting to display only the first tr in the table and hide all other tr elements by default. I have tried using ng-show and ng-hide but it does not seem to be working as expected. This is not originally my plunker; I used it for reference on group ...

htmlcssangularjs

Learn how to configure an Angular2 Template Driven form element by implementing two-way binding and integrating template driven form validation techniques

Can anyone help me figure out the correct way to set up an Angular template driven form element for both validation and two-way binding? I've tried using ngModel in different ways, but cannot seem to achieve two-way binding without encountering issues ...

htmlangular