The article here shows a brilliant example of using an ampersand to reference a parent selector, like so:
h3 {
font-size: 20px;
margin-bottom: 10px;
.some-parent-selector & {
font-size: 24px;
margin-bottom: 20px;
}
}
This works as expected. However, I am following BEM principles and do not wish to have overriding Sass. As you can see in my screenshot below, the styles from .js-tabby overrides the default .tabs code.
I've tried things like:
.tabs {
display: none;
visibility: hidden;
.js-tabby &:not(&) {
display: none;
visibility: hidden;
}
.js-tabby & {
display: block;
visibility: visible;
}
}
But alas, it doesn't work.
As I was writing this question, I had a thought that seemed crazy, but it worked! So, here's my first Q&A ever:
.tabs {
html:not(.js-tabby) & {
display: none;
visibility: hidden;
}
html.js-tabby & {
display: block;
visibility: visible;
}
}
The plugin I'm using attaches the .js-tabby class to the html element, so I targeted that and BOOM! It works.
This has been something that's plagued me for so long, and I hope I can save someone else further frustration.
Related
I'm currently learning SASS, so if this seems obvious, don't laugh!
I have a unordered list, which on li > a hover the ul background changes.
Changing the a link background is simple enough, but how do I target the ul element? I've tried using &, ~ and < which has been advised on several online tutorials, but I've had no luck. Any and all help would be appreciated, Thank you.
ul {
margin: 0;
padding: 0;
li {
margin: 0;
padding: 0;
list-style: none;
a {
margin: 0;
padding: 0;
display: block;
font-size: 60px;
font-size: 3.75rem;
color: rgb(255,255,255);
font-family: 'Cera PRO Medium';
text-decoration: none;
&:hover & li & ul {
background-color: red;
}
}
}
}
If I understand your question, just add hover property to ul element:
ul {
margin: 0;
padding: 0;
&:hover {
background-color: red;
}
...
https://fiddle.jshell.net/fo214wkd/
This can't be achieved with normal CSS, even with SASS. You'll need to use a jQuery or other JavaScript alternative to achieve this.
In the CSS Level 4 draft there is a :has pseudo selector which could achieve this, however that's only a dream at the moment.
I know this isn't a jQuery question, however a very basic jQuery example would be:
$j("a").on("mouseover", function() {
$j(this).parent("ul").addClass("hovering");
}), (function() {
$j(this).parent("ul").removeClass("hovering");
});
Trying to utlize the SASS Ampersand to get the following css output. It is not working when we use Ampersand with inside pesudo selector.
CSS
.test:first-child .test-image { display: block; }
SASS
.test {
&:first-child {
display: inline-block;
&-image {
display: block;
}
}
}
Above code basically cascading the -image with first-child.
This is because the ampersand is just concatenating the parent with the child. If you want the compiled CSS to look like your example you need to do this:
.test {
&:first-child &-image{
display: block;
}
}
If you are trying to achieve
.test:first-child .test-image { display: block; }
With your code it is getting compiled as this
.test:first-child-image {
display: block;
}
Instead ,you can simply write it as this .
.test:first-child {
.test-image {
display: block;
}
}
Hope it helps
It sounds like you have mistaken how the ampersand works in Sass. The ampersand is essentially a shorthand for writing each outer selector and then adding the selector after it onto the end. As .test-image is distinct from .test, you should specify it as follows.
.test {
&:first-child {
.test-image {
display: block;
}
}
}
Compiles to
.test:first-child .test-image {
display: block;
}
I'm trying to trigger a div from display:none; to display:block; when a link is hovered. I've tried to achieve the reaction through an adjacent sibling selector but the target div doesn't change from none to block. I think it's because I'm not defining the correct hierarchy, but I have no idea what else to try.
<div id="home_bar">
<div id="welcome_left">
I’m Anthony.
</div>
<div id="welcome_right">
<div id="name_desc">I love lamp.</div>
</div>
</div>
The above HTML is powered by the following CSS:
#home_bar {
display: table-row;
width: 888px;
border: 1px solid red;
margin-top: 80px;
}
#welcome_left {
letter-spacing: -1px;
font-size: 36pt;
line-height: 36pt;
width: 666px;
color: #606060;
cursor: default;
display: table-cell;
float: left;
}
#welcome_right {
float: right;
width: 200px;
display: table-cell;
position: relative;
}
#name:hover { color: #00A68D; cursor: default; }
#name_desc {
top: 50px;
position: absolute;
display: none;
}
#name:hover + #name_desc { display: block; }
I previously tried the following as the last line:
#home_bar > #name:hover + #name_desc { display: block; }
As that seemed like the right course of action based on this question, but I still can't achieve the desired affect (to be clear, the desired effect is: hover a link on the left, trigger the appearance of content on the right).
Any thoughts with regards to what I could be doing differently here? I'm hoping to avoid jQuery if I can as I'm normally a lot more comfortable working with CSS, but I'm completely stuck.
The adjacent sibling combinator has to be used with sibling elements. In this instance, #welcome_left and #welcome_right are the siblings. Therefore, when #welcome_left is hovered over, you will select the sibling #welcome_right's child element #name_desc.
EXAMPLE HERE
#welcome_left:hover + #welcome_right #name_desc {
display: block;
}
Unfortunately, you can't use the following, because #name and #welcome_right are not sibling elements. In CSS, you currently can't transverse the DOM, therefore there aren't any parent selectors.
#name:hover + #welcome_right #name_desc {
display: block; /* doesn't work because they aren't siblings .. */
}
I'm sorry, I'm a complete newbie to CSS and I'm trying to create a custom display for an xml file with CSS.
My question is: how can I display a certain text before a certain element, e. g. "Project:" before each element?
I tried like that with ":before" but that does not seem to do the trick
ThinkingRock
{
background-color: #ffffff;
width: 100%;
}
project
{
:before{content:"Projekt:";};
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
description
{
color: #FF0000;
font-size: 20pt;
}
notes
{
color: #0000FF;
font-size: 20pt;
}
id, created, parent, topic, context, state, done, priority, modified, purpose, success, brainstorming, processed
{
display: block;
color: #000000;
margin-left: 20pt;
}
The xml file use is this one: http://www.trgtd.com.au/index.php?option=com_docman&task=doc_download&gid=16&Itemid=71
I've only added the first line <?xml-stylesheet type="text/css" href="thinkingrock.css"?>
:before is a pseudo-selector itself, so it needs its own style block, like below:
project:before {
content:"Projekt:";
}
project {
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
fiddle: http://jsfiddle.net/wNEt3/
fiddle using your xml and css: http://jsfiddle.net/pRwMT/1/
Btw, http://htmldog.com/ is a great place to go for HTML & CSS tutorials, and they kindly point out W3schools inconsistencies, if you've visited there first :D
use z-index , z-index Only Work with position: fixed,relative,absolute:
project:before {
width:100%;
height:100%;
position:absolute;
content:"";
z-index:-2;
}
project {
position:relative;
display: block;
z-index:30;
}
or:
project:before {
width:100%;
height:100%;
position:relative;
content:"";
z-index:-2;
}
project {
display: block;
z-index:30;
}
documention : https://www.w3schools.com/cssref/pr_pos_z-index.asp
I have a site that was done in Joomla here (I'm not very familiar with Joomla, but I have had to learn it quickly) and looks great in all browsers, except IE7.
The problem is that the top menu doesn't render in IE7, and thus all the CSS after the menu breaks. I know that it's at least partially loading because some of the styles are loading (the background, colours and type), but the main container and other divs aren't rendering.
I suspect that either IE7 is not reading the correct style sheet (there are 4 - one for nomal, one for IE7, one for IE6 and one for printing) and may be trying to implement two at the same time?
I have no more ideas for how to find the problem, so I'm hoping that either someone else has had this problem or knows how to fix it.
I have included a link to the home page of the site, but if you need more information in order to help me, just let me know.
Thanks in advance.
I skimmed through some of your CSS, and I found this section in template.css:
/* begin Logo */
div.art-logo {
display: block;
position: absolute;
left: 10px;
top: 20px;
width: 500px;
}
h1.art-logo-name {
display: block;
text-align: {
HorizontalAlign
}
;
}
h1.art-logo-name, h1.art-logo-name a, h1.art-logo-name a:link, h1.art-logo-name a:visited, h1.art-logo-name a:hover {
font-size: 26px;
text-decoration: none;
padding: 0;
margin: 0;
color: {
NameFontColor
}
!important;
}
h2.art-logo-text, h2.art-logo-text a, h2.art-logo-text a:link, h2.art-logo-text a:visited, h2.art-logo-text a:hover {
font-weight: normal;
font-size: 18px;
padding: 0;
margin: 0;
color: {
TextFontColor
}
!important;
}
h2.art-logo-text {
display: block;
text-align: {
HorizontalAlign
}
;
}
/* end Logo */
At a guess, I'd say that the bits like this:
{
HorizontalAlign
}
;
should be this like this instead:
{HorizontalAlign};
and then Joomla will replace the placeholder. (I don't know Joomla, I'm just guessing it will)
If not, try text-align: center instead.
If that still doesn't fix it, you should look through all of your CSS for more instances of the same mistake.