> is the child combinator, sometimes mistakenly called the direct descendant combinator.1 That means the selector div > p.some_class only matches paragraphs of .some_class that are nested directly inside a div, and not any paragraphs that are nested further within. This implies that every element matching div > p.some_class necessarily also matches div p.some_class, with … Read more
Check out this pen. You will have to use two different containers, one for the background image and the other for your content. In the example, I have created two containers, .background-image and .content. Both of them are placed with position: fixed and left: 0; right: 0;. The difference in displaying them comes from the … Read more
Method 1: If you are looking for a self-invoking transition then you should use CSS 3 Animations. They aren’t supported either, but this is exactly the kind of thing they were made for. CSS #test p { margin-top: 25px; font-size: 21px; text-align: center; -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein … Read more
Got it working. Here was my procedure: Browse to the desired page Open the dev console – F12 on Windows/Linux or option + ⌘ + J on macOS Select the Sources tab in chrome inspector In the web browser window, hover over the desired element to initiate the popover Hit F8 on Windows/Linux (or fn … Read more
You can use the css property object-fit. (“sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.”) .cover { object-fit: cover; width: 50px; height: 100px; } <img src=”http://i.stack.imgur.com/2OrtT.jpg” class=”cover” width=”242″ height=”363″ /> See example here There’s a polyfill for IE: https://github.com/anselmh/object-fit Related: object-position (specifies … Read more
button::-moz-focus-inner { border: 0; }
Add a ::after which autofills the space. No need to pollute your HTML. Here is a codepen showing it: http://codepen.io/DanAndreasson/pen/ZQXLXj .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } .grid::after { content: “”; flex: auto; }
You probably want transparent as none is not a valid background-color value. The CSS 2.1 spec states the following for the background-color property: Value: <color> | transparent | inherit <color> can be either a keyword or a numerical representation of a colour. Valid color keywords are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, … Read more
If you mean using an attribute selector, sure, why not: [data-role=”page”] { /* Styles */ } There are a variety of attribute selectors you can use for various scenarios which are all covered in the document I link to. Note that, despite custom data attributes being a “new HTML5 feature”, browsers typically don’t have any … Read more
In your stylesheet add: @media print { .no-print, .no-print * { display: none !important; } } Then add class=”no-print” (or add the no-print class to an existing class statement) in your HTML that you don’t want to appear in the printed version, such as your button.