I have a HTML structure like the following:
<div class="menu">
<div>
<span class="mui drop-down" />
</div>
</div>
I want to hover the menu class, and then change the color of drop-down class. And, also hovering the drop-down itself, it should also change its color. Currently I have:
.menu:hover,
.menu:hover ~ mui.drop-down{
color: #000000 !important;
}
but it doesn't do anything. Whats wrong with this?
You have some errors in both html/css:
1)div element with menu class miss closing quotes.
2)css selector mui miss .
According to your OP I think the following code is enough:
.menu:hover .mui.drop-down {
color: red;
}
<div class="menu">menu
<div>
<span class="mui drop-down">dropdown</span>
</div>
</div>
The tilde (~) is the general sibling combinator.
Since there is a hierarchy, try the child combinator (>) or just a descendant combinator ():
.menu:hover mui.drop-down,
.menu:hover > div > mui.drop-down
{ color: #000000 !important; }
You can add below css to hover effect:
.parent:hover .child, .parent.hover .child { display: block; }
Related
Here is an example that I do not understand:
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
It seems to me that width: 460px is applied to all above mentioned classes. But why some classes are separated by a comma (,), and some just by a space?
I assume that width: 460px will be applied only to those elements which combine classes in the way mentioned in the CSS file. For example, it will be applied to <div class='container_12 grid_6'> but it will not be applied to the <div class='container_12'>. Is this assumption correct?
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
That says "make all .grid_6's within .container_12's and all .grid_8's within .container_16's 460 pixels wide." So both of the following will render the same:
<div class="container_12">
<div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
<div class="grid_8">460px Wide</div>
</div>
As for the commas, it's applying one rule to multiple classes, like this.
.blueCheese, .blueBike {
color:blue;
}
It's functionally equivalent to:
.blueCheese { color:blue }
.blueBike { color:blue }
But cuts down on verbosity.
.container_12 .grid_6 { ... }
This rule matches a DOM node with class container_12 that has a descendant (not necessarily a child) with class grid_6, and applies the CSS rules to the DOM element with class grid_6.
.container_12 > .grid_6 { ... }
Putting > between them says that the grid_6 node must be a direct child of the node with class container_12.
.container_12, .grid_6 { ... }
A comma, as others have stated, is a way to apply rules to many different nodes at one time. In this case, the rules apply to any node with either a class of container_12 or grid_6.
Not exactly what was asked, but maybe this will help.
To apply a style to an element only if it has both classes your selector should use no space between the class names.
For Example:
.class1.class2 { color: #f00; }
.class1 .class2 { color: #0f0; }
.class1, .class2 { font-weight: bold; }
<div class='class1 class2'>Bold Red Text</div>
<div class='class1'>Bold Text (not red)</div>
<div class='class1'><div class='class2'>Bold Green Text</div></div>
Comma groups the classes (applies the same style to them all), an empty space tells that the following selector must be within the first selector.
Therefore
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
applies that style to only class .grid_6 which is within .container_12 class and to .grid_8 class which is within .container_16.
The width: 460px; will be applied to the element with the .grid_8 class, contained inside the elements with .container_16 class, and elements with the .grid_6 class, contained inside the elements with .container_12.
The space means heritage, and the comma means 'and'. If you put properties with a selector like
.class-a, .class-b, you will have the properties applied to the elements with anyone of the two classes.
Hope I have helped.
You have four classes and two selectors in your example:
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
So .container_12 and .grid_6 are both classes, but the rule width: 460px will only be applied to elements that have the .grid_6 class which are descendants of an element that have the .container_16 class.
For example:
<div class="container_16">
<p class=".grid_6">This has a width of 480px.</p>
<p>This has an unknown width.</p>
</div>
The above means that you are applying styles to two classes, indicated by the comma.
When you see two elements side by side not separated you can assume that it is referring to an area within an area. So in the above, this style only applies to grid_6 classes inside of container_12 classes and grid_8 classes inside of container_16 classes.
in the example:
<div class="grid_6">This is not effected</div>
<div class="container_12">
<div class="grid_6">
This is effected.
</div>
</div>
The first grid_6 will not be effected while the second grid_6 class will because it is contained inside a container_12.
A statement like
#admin .description p { font-weight:bold; }
Would only apply the bold to tags within areas that have class "description" that are inside of an area with id "admin", such as:
<div id="admin">
<div class="description">
<p>This is bold</p>
</div>
</div>
Selectors combinations get different meanings - attached image explains easily
a) Multiple selectors separated by a comma(,) - Same styles are applied to all selected elements.
div,.elmnt-color {
border: 1px solid red;
}
Here border style is applied to DIV elements and CSS class .elmnt-color applied elements.
<!-- comma example -->
<div>
Red border applied
</div>
<p class="elmnt-color">
Red border applied
</p>
b) Multiple selectors separated by space – Those are called descendant selectors.
div .elmnt-color {
background-color: red;
}
Here border style is applied to CSS class .elmnt-color applied elements which are child elements of a DIV element.
<!-- space example -->
<div>
Red border NOT applied
</div>
<p class="elmnt-color">
Red border NOT applied
</p>
<div>
Red border NOT applied
<p class="elmnt-color">
Red border applied
</p>
</div>
c) Multiple selectors specified without space - Here styles are applied to elements which meet all the combinations.
div.elmnt-color {
border: 1px solid red;
}
Here border style is applied only to DIV elements with a CSS class of .elmnt-color.
<!-- no space example -->
<div>
Red border NOT applied
</div>
<p class="elmnt-color">
Red border NOT applied
</p>
<div>
Red border NOT applied
<p class="elmnt-color">
Red border NOT applied
</p>
</div>
<div class="elmnt-color">
Red border applied
</div>
Details are attached at https://www.csssolid.com/css-tips.html
Note: CSS Class is just one of the CSS Selectors. These rules applies to all CSS Selectors (ex: Class, Element, ID etc.,).
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
width:460px will be only applied to .grid_6 and .grid_8
Edit: Here is a very good article for you
http://css-tricks.com/multiple-class-id-selectors/
I am trying to have the classes change depending on what is clicked from the two headings.
If heading one is clicked, I want the font color to change to red and have it underlined with red, which in the class it currently does with a bottom border. If the other heading is clicked then I want that heading to take on the red characteristics. The one that is not clicked will just stay grey according to the no highlight class.
Here is the JSFiddle: http://jsfiddle.net/7ok991am/1/ I give an example look also of what I am trying to accomplish.
HTML:
<div id="page_headings">
<h2 class="no_highlight">Heading One</h2>
<h2 class="no_highlight">Heading Two</h2>
</div>
CSS:
#page_headings{
overflow: hidden;
margin-bottom: 32px;
}
#page_headings h2{
float: left;
margin-right:24px;
font-size: 14px;
cursor:pointer;
}
#page_headings h2:hover{
font-weight: bold;
}
.red_highlight{
color:red;
border-bottom: 1px solid red;
}
.no_highlight{
color:#898989;
}
JS:
$('#page_headings').on('click', function(){
if($('#page_headings h2').hasClass('no_highlight')){
$(this).removeClass('no_highlight').addClass('red_highlight');
}else{
$('#page_headings h2').addClass('no_highlight');
};
});
Building on #RDrazard I think you want them to switch between the two correct?
http://jsfiddle.net/7ok991am/3/
$('#page_headings h2').on('click', function(){
if($(this).hasClass('no_highlight')){
$(this).removeClass('no_highlight').addClass('red_highlight');
}else{
$(this).addClass('no_highlight');
}
$(this).siblings('h2').addClass('no_highlight');
});
JSFiddle: Link
First off, add a border-bottom property with none to the no highlight class to ensure that it looks just the same before the click.
Next, you want to the click event associated with the h2 elements, so it should be $('#page_headings h2')
Use this to impact the h2 we're clicking on.
Try this code
$('#page_headings h2').on('click', function(){
if($(this).hasClass('no_highlight')){
$(this).removeClass('no_highlight').addClass('red_highlight');
}else{
$(this).addClass('no_highlight').removeClass('red_highlight');
}
});
Check this fiddle
JS
$('.no_highlight').on('click', function(){
$(this).parent().find('.no_highlight').css('border-bottom','none');
$(this).css('border-bottom','1px solid red');
});
The above method changes the border of the currently clicked headinh which i think is what you want.
AND
if you want addClass() and removeClass(), then see this fiddle
JS
$('.no_highlight').on('click', function(){
$(this).parent().find('.no_highlight').removeClass('red_highlight');
$(this).addClass('red_highlight');
});
This method adds a red_highlight class to the active link and removes the red_highlight when not active.
Please try it..
Let's say you have something like:
<div class="parent">
<input class="childInput" type="text" />
<div class="sibling"></div>
</div>
I want to change the appearance of the parent/siblings when the child receives focus. Are there any CSS tricks for doing stuff like this?
Edit:
The reason for my question is as follows:
I'm creating an Angular app which needs editable text fields. It should look like a label until it is clicked, at which point it should look like a normal text input. I styled the text field based on :focus to achieve this effect, but the text is cut off by text input's boundaries. I also used ng-show, ng-hide, ng-blur, ng-keypress and ng-click to switch between the label and the text input based on blurs, key presses and clicks. This worked fine except for one thing: After the label's ng-click="setEdit(this, $event)" changes the edit boolean used by ng-show and ng-hide to true, it uses a jQuery call to .select() the text input. However, it isn't until after the completion of the ng-click that everything is $digest'd, so the text input loses focus again. Since the text input never actually receives focus, using ng-blur to revert back to showing the label is buggy: The user has to click in the text input and then click out of it again to revert back to showing the label.
Edit:
Here's an example plunk of the issue: http://plnkr.co/edit/synSIP?p=preview
You can now do this in pure CSS, so no JavaScript needed 😁
The new CSS pseudo-class :focus-within would help for cases like this and will help with accessibility when people use tabbing for navigating, common when using screen readers.
.parent:focus-within {
border: 1px solid #000;
}
The :focus-within pseudo-class matches elements that either themselves
match :focus or that have descendants which match :focus.
Can I use...
You can check which browsers support this by visiting http://caniuse.com/#search=focus-within
Demo
fieldset {
padding: 0 24px 24px !important;
}
fieldset legend {
opacity: 0;
padding: 0 8px;
width: auto;
}
fieldset:focus-within {
border: 1px solid #000;
}
fieldset:focus-within legend {
opacity: 1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form>
<fieldset>
<legend>Parent Element</legend>
<div class="form-group">
<label for="name">Name:</label>
<input class="form-control" id="name" placeholder="Enter name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</fieldset>
</form>
</div>
There is no chance how to do that with CSS. CSS can style only siblings, children, etc. not parents.
You can use simply JS like this:
<style>
.parent {background: green}
.focused {background: red;}
</style>
<div class="parent">
<input class="childInput" type="text" />
<div class="sibling"></div>
</div>
<script>
$('.parent > *')
.focus(function() {
$('.parent').addClass('focused');
})
.blur(function() {
$('.parent').removeClass('focused');
});
</script>
http://jsfiddle.net/C4bZ6/
This code takes all direct children of .parent and if you focus one of them, class focused is added to parent. On blur, this class is removed.
You can use pure CSS to make the text input look like it's not a text input unless it is in focus
http://jsfiddle.net/michaelburtonray/C4bZ6/13/
input[type="text"] {
border-color: transparent;
transition-duration: 600ms;
cursor: pointer;
outline-style: none;
text-overflow: ellipsis;
}
input[type="text"]:focus {
border-color: initial;
cursor: auto;
transition-duration: 300ms;
}
Try the contenteditible attribute. This may require more work to turn it into usable form data however.
http://jsfiddle.net/michaelburtonray/C4bZ6/20/
<span class="parent" contenteditable>Click me</span>
You can style it even for focus-within and not(focus-within) like this (without using JavaScript => more accessible and faster):
.myform:not(:focus-within) button[type="submit"] {
display: none;
}
.myform:focus-within button[type="submit"] {
display: block;
}
I don't have a table or ul structure for this but I am using divs to display data. I need the background color of every other row to be black. I looked around but most options are for tables or list menus so a bit puzzled as to how to do this. Any idea?
My structure:
<div class="container">
<div class="dataset">
Thomas Jones
</div>
<div class="dataset">
Edward Jones
</div>
<div class="dataset">
Tommy Lee
</div>
<div class="dataset">
Jenna Haze
</div>
</div>
You can do with with just CSS(3) using :nth-child(odd) (or even):
div.dataset:nth-child(odd) {
background: black;
}
jsFiddle example
i would go with CSS but in case you need it in jquery..then you can use :even or :odd selector.
try this
$('div:even').css('background-color','black'); // or just background , selects all even divs.
$('div:odd').css('background-color','black'); //selects all odd divs.
for just those divs having class dataset..add class selector to div. try this
$('div.dataset:even').css('background','black');
Use even/odd css3 selector
HTML
<div>row1</div>
<div>row2</div>
CSS
div {
width: 100px;
height: 20px;
border: 1px solid #ccc;
color: #fff;
}
div:nth-child(odd) {
background:red;
}
div:nth-child(even) {
background:black;
}
http://jsfiddle.net/sheeban/vHGzw/
If you must use jQuery for this:
$(".dataset").each(function(index){
if(index%2 == 0)
$(this).css('background', 'black');
});
jsFiddle
or use $("div.dataset:even").css('background', 'black');
jsFiddle
I want to change the image button from green to yellow on rollover.
Here is my CSS code
a#try-it-button {
width:273px;
height:47px;
margin-left:25px;
margin-top:372px;
background:url(../image/try-it-green.png);
}
a#try-it-button:hover {
width:273px;
height:47px;
margin-left:25px;
margin-top:372px;
background:url(../image/try-it-orange.png);
}
a.alt { display: none; }
My html code
<div id="y-moringa">
<a id="try-it-button" href="#"><span class="alt"></span></a>
</div>
Thanks in advance.
Add float: left or display: inline-block or display: block to a#try-it-button.
Which one of those you want really depends on the layout you desire.
You don't need to duplicate all the properties on :hover (except for the new background).
What you should actually be doing here is using "CSS Sprites" (there are many benefits), and adjusting the background-position on :hover.
Untested, but give this a shot:
a#try-it-button {
width:273px;
height:47px;
margin-left:25px;
margin-top:372px;
display:block; // <-- **I added this**
background:url(../image/try-it-green.png);
}
a#try-it-button:hover {
background:url(../image/try-it-orange.png);
}