Is it possible to make a custom rule in Css as #media
I have a parent class and need to make changes depended on this class as
<div class="parentGreen">
<ul class="ul1">
<li>1</li>
<li>2</li>
</ul>
<ul class="ul2">
<li>1</li>
<li>2</li>
</ul>
</div>
so when i change the parentGreen the items inside their css changes too
#parentGreen{
ul{
direction: ltr
}
}
#parentYellow{
ul{
direction: rtl;
margin:10px;
}
}
Compiled version on this link is what you want.
Do you hear about less? Try searching about it. Less is better choice for creating nested css. You can write like this:
.parent {
.child1 {
color: blue;
}
.child2 {
color: blue;
}
}
Look this link.
This should work...
.parentGreen ul {
direction: ltr
}
.parentYellow ul {
direction: rtl;
margin:10px;
}
Related
I have a function that supposed to do a toggle after a click,
but this line of code doesn't do the job after first click.
var toggle = document.querySelector('header nav ul').className = (toggle) ? '' : 'open';
only if i execute it in the console it works..
Plunker:
https://embed.plnkr.co/B5iFwB/
var toggle is inside a block that is not global, you need to write code like:
var toggle;
document.querySelector('.btn-menu').addEventListener('click', function(){
toggle = document.querySelector('header nav ul').className = (toggle) ? '' : 'open';
});
You're seeing this behaviour because your code references a variable toggle which is declared in the same statement. It works in the console because by the time the expression is evaluated for the second time toggle now exists.
I can't suggest an improvement because I don't know how you expect the function to work, given you don't define an initial value for toggle before your statement evaluates.
Also, you're using jQuery, but using Vanilla.js code-style within your jQuery event-handler. You should change your code to be more consistent: either only use idiomtic jQuery or idiomatic Vanilla.js.
There is no need for toggle
You should check if open class is available on element, then remove it else add it. You can use .classList.add and .classList.remove to achieve this:
Updated Code
Sample:
document.querySelector('.btn-menu').addEventListener('click', function() {
var nav = document.querySelector('header nav ul');
if (nav.classList.contains('open'))
nav.classList.remove('open')
else
nav.classList.add('open')
})
body {
margin-top: 80px;
}
header {
width: 100%;
}
header .btn-menu{
background: #e5e5e5;
direction: rtl;
font-size: 25px;
padding-right: 10px;
cursor: pointer;
}
header nav ul {
margin: 0;
list-style-type: none;
text-align: center;
background-color: #1b2125;
height: 0;
}
header nav ul.open {
height: auto;
}
header nav li a {
color: #fff;
}
<header>
<nav>
<div class="btn-menu">≡</div>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Services
</li>
</ul>
</nav>
</header>
Add this to your code it will do top to bottom toggle,
$('.btn-menu').on('click',function(){
$('header nav ul').slideToggle( "slide" );
});
also you need to add JQuery to your code. Add this in your head
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
I'm working on a whiteboard app that included hierarchy.
So my question is: How can I color every second sub-layer in CSS (or if needed js)?
Example stying
ul {
width: 256px;
min-height: 64px;
padding: 16px 0 16px 16px;
background-color: blue;
}
/*FOLLOWING SHALL BE REPLACED BY AN SELECTOR OR JS-ALGORITHM*/
div>ul>ul,
div>ul>ul>ul>ul,
div>ul>ul>ul>ul>ul>ul,
div>ul>ul>ul>ul>ul>ul>ul>ul {
background-color: red;
}
<div>
<ul>
<ul>
<ul>
<ul>
<ul>
<ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</div>
What I aim to color are the divs in line 2 and 4 (and so on: 6, 8, 10,... if I would work with more sub-layers)
There is no CSS selector for that. You can however achieve it with a recursive function in JavaScript (jQuery):
colorList($('div > ul'));
function colorList($ul) {
$ul.css({'backgroundColor': 'red'});
var $nextElement = $ul.find('> ul > ul');
if($nextElement.length) {
colorList($nextElement);
}
}
Is it possible to trigger changes to CSS of an element that is completely unrelated to the hovered div?
I have a CSS hover effect on a dropdown menu, that I also want to trigger the opacity of a div right at the bottom of the page to create a background overlay effect.
This is the CSS I'm using:
#overlay {
background:rgba(0,0,0,0.5);
position:absolute;
top:120px;
left:0;
z-index:0;
height:120%;
width:100%;
visibility:hidden;
opacity:0;
}
#menu-main-menu li.menu-parent-item:hover ul.sub-menu,
#menu-main-menu li.menu-parent-item:hover #overlay {
visibility:visible;
opacity:1;
}
The hover of the sub menu works fine, but the div #overlay is right at the bottom of the page, and doesn't get called when it's hovered.
I've tried all kinds of alternatives such as :hover > #overlay, :hover + #overlay, but nothing seems to trigger it. I also can't seem to find a definitive answer to the question.
Is it possible?
Yes. You can load this style in a php file and then use jQuery to apply the css when your div has been hovered on.
No there is no way to select parent element in css and that means that you cannot move up in hierarchy.
<ul class="hover-parent">
<li></li>
</ul>
<div>Something here</div>
<div class="target"></div>
From this point :
.hover-parent li:hover you cannot go up (to ul or div).
Selectors which you tried to use are "next":
A>B - This will select only direct B children of A
A+B This will select B immediately preceded by A
Here you can find W3C documentation of CSS selector
http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
And demos:
http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
Notice that it will be really confusing for user that different part off app/page is changing when he is hovering something else. Bad UX idea.
You're going to have to use JavaScript to do this.
Your posted selector #menu-main-menu li.menu-parent-item:hover #overlay is looking for #overlay somewhere inside of an ancestor element of li.menu-parent-item that is somewhere inside of an ancestor element with an id of #menu-main-menu.
Using the child selector > will not work as the overlay element is not a child of the list element you're hovering in your menu from what you have described and from comment responses.
As #Paulie_D has pointed out the two target elements, the element to be hovered and the overlay element, need to adjacent siblings to use the sibling selector +. From what you have described and the comment responses they are not adjacent siblings.
I have setup a basic example for you using jQuery. This example displays the overlay as long as you are hovering any element in the .main-menu element.
HTML
<ul class="main-menu">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three
<ul class="sub-menu">
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>Sub Item Three</li>
<li>Sub Item Four</li>
<li>Sub Item Five</li>
</ul>
</li>
</ul>
<main>
Content here.
</main>
<footer>
<div class="overlay">This is my overlay.</div>
</footer>
CSS
body {
margin: 25px auto;
width: 500px;
}
ul,
li {
margin: 0;
padding: 0;
}
main {
min-height: 300px;
}
footer,
.overlay {
height: 50px;
}
footer {
position: realative;
background-color: yellow;
}
.main-menu {
list-style: none;
height: 50px;
}
.main-menu > li {
float: left;
padding: 0 10px;
position: relative;
}
.main-menu > li:hover .sub-menu {
display: block;
}
.sub-menu {
display: none;
list-style: none;
position: absolute;
left: 10px;
width: 150px;
}
.overlay {
display: none;
text-align: center;
}
jQuery
$overlay = $('.overlay');
$('.main-menu > li').hover(
// when hovered
function() {
$overlay.css('display','block');
},
// when NOT hovered
function() {
$overlay.css('display','none');
}
);
jsFiddle: http://jsfiddle.net/ednf2pzq/
Edit
You could simplify the jQuery hover selector to .main-menu.
jQuery
$('.main-menu > li').hover(
// same code as before
);
jsFiddle: http://jsfiddle.net/ednf2pzq/1/
I'm building a survey and what I'm trying to do now is that when someone clicks an answer (for example: 8) in my list, the background of that answer changes color. This has to work for each seperate answer (there are 60 questions).
The list html/css code:
<div class="answers">
<ul>
<li class="liFirst">1</li>
<li class="liMiddle">2</li>
<li class="liMiddle">3</li>
<li class="liMiddle">4</li>
<li class="liMiddle">5</li>
<li class="liMiddle">6</li>
<li class="liMiddle">7</li>
<li class="liMiddle">8</li>
<li class="liMiddle">9</li>
<li class="liLast">10</li>
</ul>
</div>
.answers {
float: right;
width: 400px;
height: auto;
margin: 0;
background: #DFE5E3;
}
.answers ul {
display: inline-block;
}
.answers li {
float: left;
padding: 0 auto;
font-weight: bold;
}
I've already researched it a bit but can't seem to find a solution that works. I suppose I have to do this in JS/jQuery?
Tried this solution: link! but didn't seem to work for me
add an active class
.active{
background:#000;
color:#FFF;
}
and in jquery toggle class
$('ul li').on('click',function(){
$(this).toggleClass('active');
});
if he wants to choose only one answer
$('ul li').on('click',function(){
$(this).toggleClass('active').siblings().removeClass('active');
});
You can do this with the following:
JQuery
$(document).on('click', '.answers ul li', function(){
$(this).toggleClass('selected').siblings().removeClass('selected');
});
CSS
.answers li.selected {
background: yellow;
}
You probably want to remove the selected background effect one other <li>s once you click on one.
DEMO
If you want to stay strictly CSS based, this checkbox hack may be your best bet... http://css-tricks.com/the-checkbox-hack/
Which can also be implemented with radio buttons to ensure only one answer can be chosen.
jQuery
$( "ul" ).on( "click", "li", function() {
$("li").removeClass("selected");
$(this).addClass("selected");
});
CSS
.selected { background-color:lime;}
JSFiddle Demo
I have a few lists that are displayed as inline-blocks, creating the illusion of rows. Unlike tables, I cannot format rows straightforwardly. I want to apply a background color to each < li > in the row when one is hovered over. Is this possible through CSS and names/IDs?
Thanks.
Mike
CLARIFICATION: After reading the answers, I realized my question was unclear. I have 3 lists, side by side, so the first < li > in each list would represent the first row. The second < li > in each list would be the second row. And so on.
Cross-browser support with jQuery:
CSS:
li:hover { background-color: #F00 }
And for IE6 -- since it does not support the :hover pseudo-class on anything but <a> elements -- you serve it the following in your IE6-specific style sheets and script:
CSS:
li.hover { background-color: #F00 }
JS:
$("li").hover(
function() {
$(this).addClass("hover");
},
function() {
$(this).removeClass("hover");
}
);
Not sure if I understand correctly, but this fairly simple solution should do the trick:
li:hover {
background-color: pink;
}
Some browsers do not support the hover pseudo class though.
If you want to apply a style to all child elements of a specific <ul>, you can use bigmattyh's approach but set the class on the <ul> instead of the <li>.
Then, add a CSS style such as this:
.hover li { /* some styles */ }
Using this approach you can apply styles to all of the child <li> elements, but you will only need event handlers in the parent <ul>, making your code run faster.
I would simplifying things and reorganize your HTML so that each UL is a row instead of a column.
<html>
<head>
<style>
ul { clear: both; }
ul li {
float: left;
list-style: none;
padding: 5px 10px;
border: 1px solid white; }
.hover { background-color: red; }
</style>
</head>
<body>
<div id='list-container'>
<ul class="hover">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</body>
</html>
And the JS:
$(document).ready(function() {
var alterRow = function(container, class, toggleOn) {
$(container).children().each(function(i, node) {
if ( toggleOn ) {
$(node).addClass(class);
} else {
$(node).removeClass(class);
}
});
};
$("#list-container ul").each(function(i, node) {
$(node).hover(
function() { alterRow(node, "hover", true); },
function() { alterRow(node, "hover", false); }
);
});
});
You can see and edit it here: http://jsbin.com/ewijo