Is there a way to split CSS literals on multiple lines ? I'm specifically interested in inlined images, for instance this rule is functional, but not easy to handle
.some-class {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAAN...etc...etc...gg==)
}
try this:
.some-class {
background-image:url('data:image/png;base64,iVBORw0KGgo\
AAAAN...etc...etc...gg==')
}
surround width quotes than backslash before the break
i splitted the first line here:
http://jsfiddle.net/Xadvz/543/
Doesn't seem to work on http-requests.
Otherwise use \.
Example:
.background-image {
width: 100px;
height: 100px;
display: block;
background-size: cover;
}
.first-child {
border: 1px solid black;
background-image: url('http://lorempixel.com/image_\
output/animals-q-c-100-100-3.jpg');
}
.last-child {
/*Splitting long literals*/
background-image: url('data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulr\
SOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7');
<div class="background-image first-child">
<!-- Empty block -->
</div>
<div class="background-image last-child">
<!-- Empty block -->
</div>
Related
While I know you can't write variables like
root: {
--aic: align-items:center;;
}
Is there anyway to get round this, by combining the various parts seperately? The obvious obstical here is the requirement of the colon inside the variable.
i.e.
root: {
--ai: align-items:;
--center: center;
--aic:
var(--ai)
var(--center);
}
.myclass {var(--aic);}
I would suggest you to switch to SCSS and use a #mixin. Read more about it here.
Here's a live demo.
HTML:
<div id="test">TEST</div>
SCSS:
:root {
--text_color: red;
--background_color: gold;
}
#mixin my_mixin {
color: var(--text_color);
background-color: var(--background_color);
}
#test {
#include my_mixin;
}
Based on my comment on your question, you can use classes to achieve something similar. But you can't use custom properties as CSS properties, only values -- it's the same as saying for example margin: margin: var(--customMargin);;
/* Layout unrelated to answer */
div { border: 1px solid black; color: white }
.varText { background-color: red }
.varPad { background-color: blue }
.varText.varPad { background-color: green }
/* Answer */
:root { --size: 1rem }
.varText { font-size: var(--size) }
.varPad { padding: var(--size) }
<div class="varText">
Size Text only to root variable
</div>
<div class="varText" style="--size: 2rem">
Size Text only to inline variable
</div>
<div class="varPad">
Size Padding only to root variable
</div>
<div class="varPad" style="--size: 2rem">
Size Padding only to inline variable
</div>
<div class="varText varPad">
Size Text and Padding to root variable
</div>
<div class="varText varPad" style="--size: 2rem">
Size Text and Padding to inline variable
</div>
link[type*="application/*+xml"]
I'm trying to match either rss+xml or atom+xml so I want to use a wildcard in that spot.
You can use a $ wildcard, which selects element whose attribute value ends with a specified value.
div{
width: 300px;
height: 300px;
}
link[type$="rss+xml"] + div{
background: green;
}
link[type$="atom+xml"] + div{
background: red;
}
<link type="application/rss+xml" />
<div></div>
Wildcard selector is used to select multiple elements simultaneously.
[attribute*="value"] {
// CSS property
}
It will look like this
[class*="str"] {
background: green;
color: white;
}
For Example:-
You can do like this.
<div class="first_str">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-strt">The third div element.</div>
<p class="mystr">Paragraph Text</p>
Now it will select all classes, named with str like:-
first_str, my-strt, mystr
i have setup react big calendar on two different pages and have applied some styling on it through external CSS
i have tried using important tag in css but it only fix one page and disturb other
First file CSS
.rbc-timeslot-group {
min-height:120px ;
/* border-left: 1px solid #000000 */
}
Second file CSS
.rbc-timeslot-group {
min-height:20px ;
/* border-left: 1px solid #000000 */
}
i want to achieve different CSS on both pages but end up fixing one and disturbing other
Update
This is how I'd approach things using React/JSX:
class Demo extends React.Component {
render() {
const BigCalendar = ({classes}) => (
<div className={`rbc-timeslot-group ${classes}`}></div>
)
return (
<div>
<BigCalendar />
<BigCalendar classes="second" />
<BigCalendar classes="third" />
</div>
)
}
}
ReactDOM.render(<Demo />, document.querySelector("#app"))
And the CSS
.rbc-timeslot-group {
width: 50px;
height: 50px;
background-color: red;
}
.rbc-timeslot-group.second {
background-color: green;
}
.rbc-timeslot-group.third {
background-color: blue;
}
jsFiddle
You need to introduce greater specificity in your CSS. For example, start with a base style that works for the default case and, most importantly, is available to all pages, globally.
.rbc-timeslot-group {
min-height: 120px ;
}
Then, extend from there using another class. This would be declared on another page.
.another-page.rbc-timeslot-group {
min-height: 20px;
}
<div class="rbc-timeslot-group another-page">…</div>
And so on…
.yet-another-page.rbc-timeslot-group {
min-height: 40px;
}
<div class="rbc-timeslot-group yet-another-page">…</div>
Don't know whether its an elegant solution,but was able to resolve my issue by enclosing my component in another div and overriding that div e.g
<div className="first">
<BigCalendar>
</BigCalendar>
</div>
<div className="second">
<BigCalendar>
</BigCalendar>
</div>
in css
I did
.first.rbc-timeslot-group{
min-height:20px !important;
}
.second.rbc-timeslot-group{
min-height:20px !important;
}
I want to select the first and the last child with CSS but it does not work. Please take a look at my Fiddle and help me:
.area {
height: 100px;
width: 100px;
}
.area:first-child {
background-color: red;
}
.area:last-child {
background-color: green;
}
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
https://jsfiddle.net/rbw8dpsb/1/
I advise you to add a container as in your code they are childs of body BUT you don't know the last-child or the first-child of body as you may have other elements like script tags or other tags dynamically added (like in the snippet here or with jsfiddle or any other online coding tools).
.area {
height: 100px;
width: 100px;
}
.area:first-child {
background-color: red;
}
.area:last-child {
background-color: green;
}
<div>
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
</div>
Here is a screenshot to show what is inside your body when you run the snippet:
As you may clearly notice, there is a div added at the end which is the last-child of the body. Adding a container will avoid you dealing with random settings and hidden elements added.
If you don't want to let all that divs in another structure you should use first-of-type and last-of-type instead of first-child and last-child
.area {
height: 100px;
width: 100px;
}
.area:first-of-type {
background-color: red;
}
.area:last-of-type {
background-color: green;
}
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
As Temani Afif pointed, this solution is arbitrary and may not work in all the situations. As shown, it is not properly working on the code snippet but it does on JSFiddle for example. I.E. https://jsfiddle.net/vm1scerv/
I'm working on a project for a client that involved using the existing code they have while also transitioning the files into another location. The files being transitioned include images that can't be moved yet, so in an attempt to make the code future proof, I used CSS to define the image src's by embedding them in the "a" tag.
.iconWriting::before { content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/images/icons/writing_standards_resources.png");
}
iconWriting {
width: 32px;
height: 32px;
margin: 1px;
border: none;
float: right;
}
<a class="iconWriting" href="http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/StartHere/V3_Start_Here-Writing.htm" target="_blank"></a>
Unfortunately, the images will only display correctly when the CSS style defining their location is in the Head of the document. I need to be able to house these styles in an External CSS file, but when I move the previously working CSS to the External file, it breaks. Instead of images, I just get the alt text, in all browsers. I tried adding ":before" to the class specification, but this didn't work, either.
Here's a Fiddle of the working code: JS Fiddle
Thanks to #Mr Lister for his help with this; the solution is to target the "a" tag when specifying the image src using the "content" property.
/*Weekly Activity Styles*/
.activityWrapper {
width: 96%;
overflow-x: hidden;"
}
/*Upper Right Icons*/
.iconExpand::before {
content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/V2/icon/sm_expand.png");
}
.iconAcademic::before {
content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/images/icons/academic_research_policy.png");
}
.iconWriting::before {
content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/images/icons/writing_standards_resources.png");
}
.iconExpand, .iconAcademic, .iconWriting {
width: 32px;
height: 32px;
margin: 1px;
border: none;
float: right;
}
/*Dropbox & Waypoint Icons*/
.iconDropbox {
content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/images/Dropbox_small.png");
border: none;
}
.iconWaypoint {
content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/images/waypoint_smaller.png");
border: none;
}
.iconWaypointLg {
content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/images/Waypoint_image1.png");
border: none;
}
padding: 15px 20px 5px 15px;
}
}
<div class="activityWrapper">
<div class="subParaDisc">
<a target="_new" href="javascript://;" class="iconLink iconExpand" onclick="this.href=document.location"></a>
<a class="iconAcademic" target="_new" href="http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/StartHere/V3_Start_Here-Academic.htm"></a>
<a class="iconWriting" href="http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/StartHere/V3_Start_Here-Writing.htm" target="_blank"></a>
<h1>
The Icons above only work when the style defining their img content is in the head of the HTML doc.</h1>
</div>
</div>
Reference this Fiddle for the sample: https://jsfiddle.net/1gxmqnjy/21/