Hej Folks,
i'm stuck with CSS and the :nth-child and :not selector.
The Situation:
I have a searchfield where the results are displayed below. When entering the site all results are already shown. For better reading each 2nd result row gets a highlight color unsing :nth-child(odd)
The Goal:
When a user enters a value into the search bar i want do hide (not remove!) all invalid rows. It works pretty fine by adding the class __inivisible. It just sets the display attribute to none.
The Problem:
After adding the class __invisible the :nth-child selector won't work as expected. I have combined it with a :not(.__invisible) selector to exclude all irrelevant and invisible results. Thus he still counts them.
Maybe its a bit hard to understand, so here is a jsfiddle example: http://jsfiddle.net/SHGp2/3/
i would expect that the 2 pink rows should be the only rows where he has to decide whether ist odd or even, so one should be pink and one should be blue.
if you don't understand what im talking about, disable the comment in the __invisible class. You will see two pink rows instead of one pink and one blue.
Maybe i got the function of the :nth-child selector wrong, if so, is there a way to get the thing working with pure CSS?
Thanks in advance! :)
P.S.
no JS in this fiddle ;)
nth-chlid counts the children of the parent, regardless of whether they are visible, or have any other conditions applied to them. Unfortunately there is no way to do what you're trying here, as even nth-of-type only compares tag names.
Your best option is to completely remove the rows when they are filtered out. I would suggest making a clone of the table, and then you can clone this "template" whenever you need to get the original full table back.
Related
I have 2 modals that I'd like to style differently at the modal-dialog level. I'm not sure how to do it. It seems that if I apply a style that I think should only apply to one, it applies to both of them. One modal template is passed as an HTML string, the other is passed as a script/ngTemplate that is part of the partial page that the controller runs on, if that difference matters. The one that is passed as a string has an ID on the root div, and the CSS that is applied to that doesn't seem to work. But if I have just a .modal-dialog in my css, that is applied to both modals, as I would expect it to. In the Chrome debugger, the #ErrorModal selector is greyed out, so it does see it, it's just not applying it, even with an !important, and I'm not sure why. When either modal is displayed, the HTML looks similar, in that the one that uses the template doesn't contain any of the classes from the parent div that it's wrapped in. One of the main things I want to do is set the background-color of the error modal to white, but leave my other one opaque.
I've looked at this question, but I don't know that it will let me apply styles 'above' the template.
My css-fu isn't very strong, nor is my Angular, but it seems like the specificity should make it apply.
Any ideas?
Turns out there is an option you can pass to the modal, windowTemplateUrl. I haven't found great documentation for it, but I was able to cobble something together using this question as a springboard.
I have this navigation that only appears on smartphones. For testing purpose you can see a desktop version here: http://dknytkom.dk/forside/
I am trying to replace the anchors "menu" and "Søg" with icons using background image. But for some reason the styling rules only affects one of either. If I switch the order of the css command lines, I get to select the other.
I've tried using attributes, like a[href="..."]; I've tried using a:nth-child(...), and finally given them an id each but to no avail.
Anyone got a clue?
first of all we appreciate if you post the css selector code that apply to just one of them.
second as i understand your path to the picture has problem, correct it and then tell us what was the result.
if you have problem with selector use a very specific one like these two:
for first one use : a#menu-knap.counter
for second you can use a#soege-knap.counter
Sorry for the inconvenience. I remove some css comment around the statements, and yup, it worked.
Is there a way to disable multi-selection from a table in CSS?
I have a table, and the user can select multiple items but I want it to restrict it to one item, is there a way to do that through CSS?
Short answer: there was possibly going to be a way, but no, there isn't.
Long answer: one of the proposed values for user-select was element. If the property made (or makes...) it into CSS3, I think that'd be the style you'd use. No browser implements it per the proposal though, since it was nothing beyond an idea. Vendor implementations usually only have all, text and none to choose from, but not element or elements.
CSS does not control user selections.
The best you can do is put a transparent DIV over top of the area to prevent users from selecting it. They could also just use Firebug to delete this DIV.
I'm currently working with a set of links that are getting their background images replaced when they are focused, hovered over, and non-focused; but right now I also need to fix it so that when you hover a focused link you'll get yet another result. My searching hasn't found anything and my experiments with anything like:
a:focus:hover { background:url(image.url) no-repeat;}
have met with less than desired results. Does anyone know of way to simply do what I'm trying for?
This should work, but focus won't work in IE without a valid doctype, so I doubt :focus:hover will fare any better.
Solution found, that method does work; but only when you remember to include the class and sub-class names that you are applying to an item.
Is there a way to bold only part of the text in a drop down list option or is this not possible?
I know that you can style the entire option with CSS, but that is not what I am looking for. And HTML inside of an option tag does not render.
Here would be an example of a drop down list item:
SomeID - Description of ID
You cannot do this. The most likely solution you'll find "out there" would be to add a surrounding span with hard coded style, but neither IE (7) nor Firefox (3.0.12) honor this. In fact, if you look at the generated source in Firefox, the internal span is completely stripped out.
What you can do is use a JavaScript solution to give you the appearance of a select without actually using a select.
EDIT: And here's a great HOWTO on how to do it: http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/
Not possible or at least not working cross browsers. If you really need this, you can create your own dropdown but I wouldn't recommend it.