This question already has answers here:
:last-child not working as expected?
(3 answers)
Closed 7 years ago.
Could you please tell me why CSS is not working on last button. Actually I give border to last button of button bar. I also apply important to that last button or of bar. But it is not taking CSS. Here is my last button CSS:
.button_account_bar > .button:last-child {
border-top-right-radius: 8px!important;
border-bottom-right-radius: 8px!important;
}
http://codepen.io/anon/pen/oXdoBy
The issue is because last-child means it has to be the last child of the parent. Applying it to .button does not mean "last child button", it still has to be the very last child, regardless of if it's a button or not.
What you are basically saying is: apply style if it's a .button AND if it's the last-child
It seems you can use last-of-type instead:
.button_account_bar > .button:last-of-type {
border-top-right-radius: 8px !important;
border-bottom-right-radius: 8px !important;
}
You can check out browser support for last-of-type here
Note that you don't actually need !important at all, but you may have some other reason for it so I will leave that for you to decide on.
The last button is not the last child of its parent. You have another element, .toggle_button_div as the last child of .button_account_bar.
One way to solve it is to wrap the buttons in a new <div> and then refer to that in your CSS rule:
.button_account_bar > div > .button:last-child {
...
Demo here
In your code .button_account_bar is the parent class so it's last child is div which class is "toggle_button_div, so style for ".button_account_bar > .button:last-child" is not working use div-class="toggle_button_div" outside the div-class="button_account_bar" for proper work of your style, and absolutely your code will work. or you can use last-of-type in place of last-child
Related
I am making a custom element dialog box. It is NOT modal, so needs to detect a click outside of itself to close, but I should not close when the click is inside (unless the property closeOnClick is set). It uses a default <slot> for the contents of the dialog box. The html for it is like this (I use lit-element but that is not relevant to this question).
<style>
:host {
display: block;
}
dialog {
position: fixed;
padding: 10px;
margin:0;
border: none;
border-radius: 2px;
box-shadow: 0 0 40px rgba(0,0,0,0.1), 0 0 10px rgba(0,0,0,0.25);
}
</style>
<dialog
id="dialog"
#close="${this._dialogClosed}"
#keys-pressed="${this._keysPressed}">
<slot></slot>
</dialog>
I manage multiple instances by holding a Map of instances with the z-index as the value. When there is at least one open dialog box I have an event listener on window for the click event. When I receive a click I use the following code to see whether to close the dialog (this.sizingTarget is the dialog element within the shadowRoot of my element).
const keys = [...openDialogs.keys()];
const self = keys[keys.length -1];
if (self.clickReady && (self.closeOnClick || !self.sizingTarget.contains(e.composedPath()[0]))) {
//click was outside dialog (or we close on click), so close
self.close('click');
}
The problem is the test !self.sizingTarget.contains(e.composedPath()[0]) does not appear to work when the element clicked on is itself a custom element with some <slot> elements in it. I found a long discussion on github about this issue and it appears they resolved it by adding Node.isConnected property. But I can't work out how you are supposed to use it.
Can someone please explain how I should go about seeing if the element clicked is actually within the finally distributed nodes in my tree of elements and their (all open) shadowRoots.
It appears that !e.composedPath().includes(self.sizingTarget) works - at least it does were it worked before and the case I was struggling with above.
I'm working on an angular app and I'm having an issue when adding a '.active' class to a nav item.
Here is a stackblitz link that demonstrates the issue:
https://stackblitz.com/edit/angular-jjqyft?file=app%2Fapp.component.css
Basically, when I click a box, it scales but part of the next box is showing, almost like the active box is transparent. My active class has a z-index of 1 and an opacity of 1.
On Firefox, this doesn't seem to be an issue. Also, I've done something similar using the same technique before (but without any frameworks). This link will show you an example from that project.
I'm not sure if I'm doing something wrong or if it's a Chrome issue. I appreciate any feedback.
EDIT: Just checked on Edge and the same issue is there. So far it seems like Firefox is the only browser where this issue doesn't exist.
Just add position:relative to either the .section a or .active
Such as:
.section a {
display: block;
width: 120px;
height: 80px;
opacity: .5;
transition: all .5s;
position:relative;
}
The reason the clicked element seems as if it has opacity <1 is that the next element is actually "above" it, while having opacity: 0.5;. By "above it" I mean that the next element is further down the DOM tree, hence having a higher stacking order than the previous (currently the clicked one).
In twitter bootstrap, some elements get "greyed out" when the mouse hovers over them. This is true of buttons and linked list group items. Two examples are here: http://imgur.com/a/ABhkT#0
Can this effect be triggered programmatically? If so, how?
Yes, Using the 'onmouseover' attribute. It is quite similar to the 'onclick', except obviously for hovering instead.
Like the 'onclick', you will have to include a java script function that would change the css style for that element.
Depending on what you are trying to have this effect on, you could either put it right into the tag that is the object, or use <span></span>.
Ex:
<div onmouseover="fade()">
<p>text to fade</p>
</div>
Javascript:
function fade(){
code to change style
}
should be straight forward, this would fade everything inside the div (including the background)
Ok, I figured it out.
If the effect were being caused by a css class, one could simply apply the class to the element, like this:
$('<my_element>').addClass('bootstrapMouseoverGrey')
This doesn't work, though, because the effect isn't caused by a class. It's caused by a pseudoclass. Pseudoclasses can't be added programmatically.
One workaround is to create a new actual class with the exact same definition as the pseudoclass. In my case, the pseudoclass is a.list-group-item:hover, defined in bootstrap.css.
a.list-group-item:hover,
a.list-group-item:focus {
text-decoration: none;
background-color: #f5f5f5;
}
I edited bootstrap.css to make a new (actual) class, bootstrapMouseoverGrey, with the same definition as the pseudoclass.
a.list-group-item:hover,
a.list-group-item:focus,
.bootstrapMouseoverGrey {
text-decoration: none;
background-color: #f5f5f5;
}
Now, I can just add this class to an element using the line at the top of the answer. This gives me the result I want. Works like a charm!
Using jQuery:
var event = jQuery.Event('<event_name>');
event.stopPropagation();
$('<selector>').trigger(event);
Taken from the docs.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
The community reviewed whether to reopen this question 9 months ago and left it closed:
Original close reason(s) were not resolved
Improve this question
I am trying to hide an HTML element with CSS.
<select id="tinynav1" class="tinynav tinynav1">
but it's very resilient, even with the Google Inspect element I cannot change the styling.
It's simple, just set the display property to none in CSS:
#tinynav1
{
display:none
}
again when you would like to show it set the display to block.
visibility: hidden hides the element, but it still takes up space in the layout.
display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.
Other advantages of using display:
display:none means that the element in question will not appear on the page at all (although you can still interact with it through the DOM). There will be no space allocated for it between the other elements.
visibility:hidden means that unlike display:none, the element is not visible, but space is allocated for it on the page.
use display:none; or visibility:hidden;
CSS:
select#tinynav1 { display: none; }
or if multiple selects should be hidden, use the corresponding class:
select.tinynav1 { display: none; }
As inline-style you could do it also (which you can try for inspector):
<select id="tinynav1" style="display: none">
You can use display:none or visibility:hidden, based on your requirements:
#tinynav{display:none;}
or
#tinynav{visibility:hidden;}
Refer the below URL for better understanding of display:none and visibility:hidden.
Difference between "display:none" and "visibility:hidden"
If you want to hide it and collapse the space it would need, use display: none; if you want to keep the space, use visibility: hidden.
<select id="tinynav1" class="tinynav tinynav1">
CSS
.tinynav {
display: none;
}
Use style="display:none" directly on the <select> or create a css class having that setting and assign the class to the <select>.
Use this CSS
.tinynav {
display: none;
}
or
.tinynav {
visibility: hidden;
}
The difference is that the former will make the select not rendered at all and the latter will make the select rendered (it will take the space of the document) but it will be completely invisible;
Here's a fiddle to show the difference: http://jsfiddle.net/rdGgn/2/
You should notice an empty space before the text in third line. It is the select that is rendered but not visible. There is no space before the second line of text, because the select is'nt rendered at all (it has display:none).
There is also a third option which is
.tinynav {
opacity: 0;
}
It behaves almost the same as visibility: hidden but the only difference is that with opacity: 0 you can still click the select. With visibility: hidden it is disabled.
Here is a simple example of some markup I have:
HTML:
<input type="checkbox" name="ex1">
<input type="checkbox" name="ex2">
<ul class="reveal">
<li>Hi</li>
<li>Bye</li>
</ul>
The checkboxes are used as filters to remove <li>s with certain tags. This all works fine. My issue is that when the checkbox is checked and the filter logic runs, it uses a display:none to remove the specific <li>s but the css I use to format doesn't get applied correctly after the fact. For example, let's say clicking the first checkbox removes the first <li> and the 'bye' <li> is the only one left. That will work fine, but the border I have defined in the css persists even though the selector shouldn't match it anymore. This is the selector I used:
CSS:
#columns .calendar td ul.reveal li + li {
border-top: 1px dotted #999;
}
This style is applied correctly at first, but after the display:none is applied and the 'bye' li is the only li left it will still have the dotted border.
I've used the browser developer console to check and this is indeed the only style rule that is being applied to create the border.
I've read something along the lines of display:none not repainting the DOM, and to access a variable that forces the browser to repaint (something like $('whatever')[0].offsetHeight) but this does not seem to fix my problem.
jQuery Based Solution
CSS rules by themselves will not work since the DOM is being manipulated by JavaScript.
What you could do is use JavaScript to identify the first li element left in the list.
For example:
$('ul.reveal li').filter(':first').addClass('first-child');
where the CSS rules are:
ul.reveal li {
border-top: 1px dotted #999;
}
ul.reveal .first-child {
border-top: none;
}
Demo fiddle: http://jsfiddle.net/audetwebdesign/BXMaB/
The jQuery action picks out the first li element in each ul list and then applies a CSS rule to know out the top border that appears on all li elements by default.
You would need to apply this jQuery action when ever a check box (event) is checked, in addition to binding it to the document load event.
The CSS selector you have chosen is interested in the structure of the DOM rather than what is and isn't painted. Selector S + S will still apply to S2 even when S1 is being removed, which is why it's still getting a top border.
Given that you are able to manipulate the DOM I would suggest either removing and re-adding the element itself or writing a selector that will respect a class added to S1 (which also applies display:none to it).
For instance:
selector:not(.hidden) + selector { [Only works in IE9+] }
or
selector.active + selector.active { [Works in IE7+] }