I just wondered if this is in some way a css attribute:
http://dl.dropbox.com/u/14645664/fhjfhgf.JPG
Does anyone know ?
Nope, this is definitely not CSS.
However, that doesn't mean you can't do something similar with CSS.
Start with an element with a specific class, like "slashed":
<span class="slashed">True?</span>
Then, CSS pseudo elements/selectors to the rescue!
.slashed:before {
content:"╱";
display:block;
color:red;
font-size:2em;
position:relative;
left:1em;
top:5px;
}
Note that the slash used in the CSS is "╱", not "/", as it gives a better slash effect.
You can obviously tweak it by changing the top, left, and font-size properties.
The end result looks like:
Note that CSS :before won't work in IE7 below, and other (much) older browsers, so you'll want to have some sort of fallback.
http://jsbin.com/ohuxig/edit#html,live
.strikethrough {
position: relative;
}
.strikethrough:before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 1px solid ;
border-color: red;
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
transform:rotate(-5deg);
}
No, that is in no way a CSS attribute.
Related
I must be overseeing something or have some stupid error in my code, but I can't override Class CSS with the ID CSS AND ( blush ) even with adding the loathed !important hack ...
NB: This is a old(ish) WordPress template, still using clearing div for floats, but I have to work with it. Not my choice.
HTML:
<body id="page-front-page" class="page-template-homepage">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Gardens</li>
</ul>
<div class="sidebar">
blah
</div>
CSS
#page-front-page > .sidebar {
padding: 0;
position: absolute;
top: 0;
right: 0 !important;
width: 45%;
}
few lines further is
.sidebar {
width: 280px;
padding: 50px 40px;
position: absolute;
top: 0;
left: 0;
font-size: 0.71em;
font-family: 'BrandonGrotesque-Light';
}
I've even tried swapping places of respective .sidebar CSS , but nothing helps. Simply cannot get right:0; to override left:0;.
Here is the inspector screenshot:
What am I missing, not seeing, being dumb about?
Thanks a lot !!!
You would use right 0 !important to override another right declaration. You're using it in an attempt to override another property. That's not how it works. There's no connection because they're two different properties.
If you want the opposite of left: 0, then try left: 100%... or, as #BoltClock mentioned in the comments, left: auto.
This has to do with "specifity": The overriding rule's selector has to be at least as specific as the other one, so you have to use this selector on the second rule:
#page-front-page > .sidebar {
(google for "CSS specifity" to learn about the exact importance of the different parts of a selector concerning specifity )
Addition: Yes, and as Michael_B and BoltClock wrote, you can't override a right parameter with a left parameter, but have to reset the first one to auto
Try:
#page-front-page > .sidebar {
padding: 0;
position: absolute;
top: 0;
right: 0 !important;
width: 45%;
left:inherit!important;
}
I know that has been asked before, but I find no clean way of overriding this CSS:
.ui-input-search:after {
content: "";
height: 18px;
left: 0.3125em;
margin-top: -9px;
opacity: 0.5;
position: absolute;
top: 50%;
width: 18px;
}
I need to leave ui-input-search on the element, but can add my own class, like:
.ui-input-search-no-pseudo:after {
content: "";
}
Question:
Is there an easy way to remove "pseudo-css" without having to overwrite the CSS line by line?
Thanks!
As far as I can tell there is no other way than to override all properties. The styles are defined on the element, they won't just disappear because of another selector that targets the element.
If you only want to remove the pseudo element from the page you can do content: none.
Added from comments below:
The difference between content: "" and content: none is that content: "" produces a pseudo-element with no content (i.e. an empty pseudo-element), whereas content: none prevents the pseudo-element from being generated at all.
Here content: ""; doesn't affect at all if you want to remove that pseudo you have to use content:none; it will remove previously added pseudo content.
content:none;
If that doesn't help you can also try :
display:none;
if still, it doesn't work then you could try the below, but I never suggest you use !important
display:none !important;
here is working jsfiddle
https://jsfiddle.net/ganeshswami99/52duu0x8/1/
How would you write this to be SASS compliant?
.fader { display: inline-block; }
.fader img:last-child {
position: absolute;
top: 0;
left: 0;
display: none;
}
Basically I'm just replicating this example of fading in one image over another (found here.)
His JFiddle example: http://jsfiddle.net/Xm2Be/3/
However his example is straight CSS, I'm working on a project in SASS and am not sure about how to correctly translate it.
My Code
Note in my example below, the img hover isn't working correctly (both images are showing up and no rollover fadein action happens)
My CodePen:
http://codepen.io/leongaban/pen/xnjso
I tried
.try-me img:last-child & .tryme img:last-of-type
But the : throws SASS compile errors, the code below works
.try-me img last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
However it spits out CSS which doesn't help me:
.container .home-content .try-me img last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
UPDATE: Working Codepen:
http://codepen.io/leongaban/pen/xnjso
Nesting is not a requirement with Sass. Don't feel obligated to do so if there's no need to break up the selectors.
.try-me img:last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
If you are applying styles to the image and then specific styles to the last-of-type, then this what it would look like when you nest it:
.try-me img {
// styles
&:last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
}
Neither of the above worked for me, so.
last-of-type only plays nice with elements, you can select things with classes all you like but this gets handled by the elements. So say you have the following tree:
<div class="top-level">
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="somethingelse"></div>
</div>
To get to the last div with the class of middle, doesn't work using last-of-type.
My workaround was to simply change the type of element that somethingelse was
Hope it helps someone out, took me a while to figure that out.
Hey why don't you use only CSS? You could remove all the JS, I mean hover is support right back to ie6. I guessed that you know there is no hover event just active on tablets..
I mean you will need to set an area for the image.. But I find it use full, especially if you want an href.
http://codepen.io/Ne-Ne/pen/xlbck
Just my thoughts..
My css for a tree node icon is the following:
.icon {
background: url(http://dummyimage.com/100x100/ccc/fff);
width: 100px;
height: 100px;
position: relative;
}
.icon:after {
background: url(http://dummyimage.com/32x32/f0f/fff);
width: 32px;
height: 32px;
display: block;
content: ' ';
position: absolute;
bottom: 0;
right: 0;
}
I set iconCls to "icon" but it does not work, I also tried "icon icon:after" and "icon:after" but with no luck.
I use a modern browser and my overlay css is valid, but extjs doesnot seem to understand it. How can I overcome this problem?
The icon element is by default an <img> element. It's contents are replaced by the image. You can't use :before or :after with it, because they form part of the contents that get replaced. You will need to override the treeRenderer in Ext.tree.Column to apply your second image.
looks like you forgot the class prefix in one of youre tests try .icon:after {}
I want that when I hover an element(a box made with css), the background color of the body changes from one color to another, for example white to red. The problem is that this should be done using css only and no javascript. And if javascript has to be neccesarily be used, then the color should change back to the previous one on mouse out.
---------------EDIT---------------
Actually I was trying this:
body{backgroung: #000;}
#div{some properties}
body #div:hover{background: #fff;}
Pure CSS experiment:
http://jsfiddle.net/Tymek/yrKRX/
HTML
<div id="trigger"></div>
<div id="bg"></div>
CSS
body {
height: 100%;
}
#bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
widht: 100%;
height: 100%;
z-index: 1;
background: #EEE;
}
#trigger {
position: absolute;
width: 200px;
height: 136px;
top: 50%;
left: 50%;
margin: -68px 0 0 -100px;
background: #333;
z-index: 2;
}
/* KEY */
#trigger:hover ~ #bg {
background: #EE0;
}
Please use like this
<html>
<body>
<style type="text/css">
.top{
background:red;
}
.top2{
background:white;
}
</style>
<div class="top" onmouseover="this.className='top2'"
onmouseout="this.className='top'">Here</div>
</body>
</html>
Use the :hover selector.
It seems pretty straight forward unless you are doing something very different.
Check following example for reference:
.classname {
background-color:white;
}
.classname:hover {
background-color:red;
}
Working fiddle
You have many typo's in your code such as mispelling background as backgroung and treating div as an ID (#div).
CSS (with explanation to typos)
body{background: #000;} /*backgroung (mis-spelled)*/
div{width:100px; /*#div (treated as ID)*/
height:100px;
border:1px solid black;}
To hover over a parent tag you must compulsorily use javascript or jQuery. you may be getting doubt that why there is no css property to select the parent tag, if so, then you can go through this interesting link . To avoid parent selector concept in most of cases we can evade using positioning in CSS (check Tymek's solution).
jQuery
$(document).ready(function(){
$("div").hover(function(){
$(this).parent(this).css('background-color','red');
});
$("div").mouseleave(function(){
$(this).parent(this).css('background-color','white');
});
});
Assuming you are new to jQuery, give a link in head tag of HTML, something like below to make the above function work.
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
Check this Working fiddle