I have the ng-repeat directive on my div <div ng-repeat="tab in tabs" class="test"></div>
In my css I have this:
.test {margin-right:1%}
.test:nth-child(4n) {margin-right:0}
The nth-child(4n) is not working with my ng-repeat but if I manually put my div without the ng-repeat it works like a charm.
(It's the same with all nth-child combination.
So what did I miss ?
EDIT: My case concerns the use of the ng-repeat combine with nth-child pseudo-element
Thank you in advance.
EDIT 2
This post is old but the problem as the last comment say, is that there is some ng-show.. It was obvious, no excuses.
Related
This question already has answers here:
nth-of-type vs nth-child
(7 answers)
Closed 1 year ago.
I wrote a css selector that doesn't work. I want to understand why.
The following html:
<div class="container">
<br>
<br>
<p id="copyright">...</p>
</div>
I wrote the expression:
div[class='container']>br:last-child
Because i read that:
x:last-child selects all last-child x elements.
So why this expression returns nothing?
The last child of div[class='container'] node is <p id="copyright">...</p> element.
To select last br child you need to use :last-of-type, something like this:
div[class='container']>br:last-of-type
In your sample p is the last child. Here it's colored in red:
div[class='container'] p:last-child{
color: red
}
<div class="container">
<br>
<br>
<p id="copyright">test</p>
</div>
You likely aren't seeing any styles being applied because br tags are extremely limited in styling options. br tags simply generate a line break. So there's not really any content or dimension to them to style.
To show your selector is working, you can target the p tag instead of the br tag and you'll see the styles apply just fine. So change to div[class='container']>p:last-child. This is technically verbose as you could just as easily use this selector: .container p:last-child which is much more readable and clear. Just fyi.
I hope that gets you unstuck and moving towards a solution. Let me know if I've missed something.
I have a web code generated by an aplication (built in angular). It is a menu choice where I need to hide some of them. It looks e.g. like this:
<div class=first>
<div class=second>
<a href=href1>
</div>
<div class=second>
<a href=href2>
</div>
<div class=second>
<a href=href3>
</div>
</div>
Now what I need is to hide the div which contains a element with href2.
I can hide the a element:
.first .second a[href="href2"] {display:none}
But I need to hide the whole div element. I thought:
.first .second < a[href="href2"] {display:none}
that doesn't work.
I KNOW THE JQUERY SOLUTION with has function. The problem is I can only adapt css files of the application. If i'm right I cannot use jquery in css file.
Please...any Idea how to do this ?
thanks a lot for help
best regards
Marek
At the moment there is (sadly) no way to adress the parent element with CSS.
I don't know your layout or CSS Code but maybe you can just structure your HTML-Code in a different way.
Edit
And now I understand your question...
To hide (for example) the 3th .second div you don't need to adress it from the child element but from the parent element.
What you are probably looking for are the nth selectors,
for instance: nth-child() or nth-of-type().
You can find more info here.
Also, you should probably take a look at the basics of HTML and CSS.
In your code you have not closed the <a> tags or wrapped the values of the attributes in quotation marks.
Wrong:
<div class=first></div>
Right:
<div class="first"></div>
To hide (for instance) the first element you could use the :first-child selector or the :nth-child() selector. Since you will probably use the nth-child() selector this would be:
.first > .second:nth-child(1) {
display: none;
}
I'm using this good script from CodyHouse to set up a filterable portfolio: http://codyhouse.co/demo/content-filter/
I'm using AngularJS to parse data via JSON and everything is fine, except for the fact that the CSS is not applied properly to the dynamically loaded elements.
You can see the differences in this image:
As you can see, the first row, which is loaded via Angular, has no css applied at all. The second row, which is already placed in the HTML, is working fine.
How is it possible? All the elements in both rows have the same CSS selectors and the same CSS rules applied.
Here you can find a Plunker: http://plnkr.co/edit/mFtMpm5CJOiPcu3tRVOj?p=preview
This is the generated markup from Angular:
<li class="mix color-1 check1 radio2 option3 ng-scope" style="display: inline-block;" ng-repeat="drawing in drawings"><img src="img/img-1.jpg" alt="Image 1"></li>
And this is the html static markup:
<li class="mix color-1 check1 radio2 option3" style="display: inline-block;"><img src="img/img-1.jpg" alt="Image 1"></li>
This is the css applied:
.cd-gallery ul { text-align: justify; }
.cd-gallery li { width: 23%; }
There is absolutely no difference between them and I'm getting a bit crazy on this. It's the first time that I get issue with css applied on dynamic and static elements. Thanks in advance for any help.
Ok, I found the solution to the problem.
Basically the whitespace between the (necessary for the justification) is not emitted with Angular's repetition so you also have to wrap the whitespace so it gets repeated, like:
<span ng-repeat-start="drawing in drawings"></span>
<li></li>
<span ng-repeat-end></span>
Thanks to this thread: Angular: Why doesn't CSS justification work with ng-repeat?
Of course it's not optimal, because it forces you to add a ton of useless markup but at least it works. If anyone can suggest a best solution it will be appreciated.
I tried searching for option to apply css to parent div but failed to achieve it. I finally implemented the same with jquery. Do we have any option for the below jquery line to implement with css
$('.description').parent().prev().closest('div').css('padding-top', '10px');
Currently no, there is not. This is similar to a previous thread -
Is there a CSS parent selector?
However, you could just apply a class or id to your parent and select it in CSS using that newly set class/id.
Assuming your html looks a bit like this:
<div>
<div class="description">
............
</div>
</div>
Then the jQuery to target the parent of 'description' would be:
$('.description').parent().css('paddingTop', '10px');
Fiddle here: http://jsfiddle.net/EFmf8/
(changes colours instead of padding to better illustrate)
Pity there's no CSS selector for this . . .
I am trying to match all elements with a class of span1, span2, span3, span4 and so on.
I am using the following code, but it does not match the last child of these classes:
[class*="span"]:last-child{
margin-left:0;
}
For example if I have:
<div>
<div class="span3"></div>
<div class="span9"></div>
<div class="clearfix"></div>
</div>
The rule does not apply to the .span9 element.
last-child works on whatever the last child of the parent is. In your example, it's looking at the last div and seeing that its class is clearfix - not something with span in it - and failing to match.
If you're always clearfixing at the end and you only want to target the second-to-last child, then you could use.
nth-last-child(2)
which would, as its name suggests, target the 2nd-to-last element, regardless of what it is. View on JSFiddle.
If you're always working with divs, you could also use this code to get the same effect:
nth-last-of-type(2)
View that one on JSFiddle.
The IE support for all of these patterns (last-child, nth-last-child, and nth-last-of-type) is the same, IE9 or later.
Though, of course, you can simply get rid of the :last-child bit to target all of your span class divs, regardless of where they are within the parent:
[class*="span"]
View on JSFiddle