This question already has answers here:
Select second last element with css
(3 answers)
Closed 3 years ago.
I want to select 2nd last-child.
which is the product, Kindly suggest me.
<ul>
<li>Home</li><li>About</li>
<li>Setting</li>
<li>Product</li>
<li>COntact US</li>
</ul>
<style>
ul li a{
color: black;
}
ul li a:nth-child(n-1) {
color:red;
}
</style>
you can do:
li:nth-last-child(2) {
css declarations;
}
nth-last-child counts back from the last child rather than forward from the first.
Note that I took out the 'ul' and 'a' selectors from the css. That didn't match what you had in the html.
Related
I have a below snippet for showing TABS which is static HTML. But each item would get shown on UI based on some business logic. Based on the number of tabs I need to set a width. For e.g if two tabs are shown then I need to equally divide tabs i.e 50%. when three, it will be 33.3%.
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
Using 'ng-class' I can add runtime classes to apply the width but its increasing the complexity and killing the page as I need to apply the same business logic in ng-class.
Rather, I was trying to use ng-init to get the count to check how many tabs are formed.
<ul ng-init="totalTabs=0">
<li ng-init="totalTabs=totalTabs+1">1</li>
<li ng-init="totalTabs=totalTabs+1">2</li>
<li ng-init="totalTabs=totalTabs+1">3</li>
<li ng-init="totalTabs=totalTabs+1">4</li>
</ul>
This doesn't give me the expected count. Do you have any clue or suggestions ?
It's time to use some new features of CSS3. In case you don't know it, there's a new display called flex. It allows a lot of things, and one of them is to give elements the same width, based on their parent's width.
You can find a quick tutorial here, or if you want to be fast :
ul {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: flex-start;
li {
flex: 1 1 auto;
}
}
I use the mwl calendar and I will mark the hour from 12 - 13 in another color inday view.
Is there a simple possibility to do this?
[EDIT]
Now I have tried this one
<style type="text/css">
.cal-day-hour-part:nth-of-type(2n) {
background-color: #f00 !important;
}
</style>
with this plunker example:
Plunker example
and this works fine, than I have tried it with .cal-day-hour-part:nth-of-type(3n) and this does not work. Does anyone know why?
The DOM is structured like this:
<div class="cal-day-hour">
<div class="cal-day-hour-part">
<div class="cal-day-hour-part">
</div>
<div class="cal-day-hour">
<div class="cal-day-hour-part">
<div class="cal-day-hour-part">
</div>
...
The :nth-of-type(n) selector matches every element that is the nth child, of a particular type, of its parent. There are at most 2 .cal-day-hour-part children of .cal-day-hour in your DOM. That's why 2n works but 3n does not.
Regarding your original question (and thanks for the edits to clarify), you'll want to use :nth-of-type(n) on .cal-day-hour instead, and stop using the counter n as you don't need it.
.cal-day-hour:nth-of-type(7) {
background-color: #f00 !important;
}
Here's an updated plunkr
Here's the situation:
I'm building a page for an application which consists of a navbar, a footer and a 3 column body.
Initially, only one column should be shown. This first column will be filled with clickable divs (let's call them cards). When one of these cards is clicked, the second column should slide open from the side, revealing more information about the clicked card.
The same workflow applies to the second column: the details displayed in the second column contains its own cards, which - when clicked - open up the third column with more details about the card in the second column.
The second and third column can also be closed, while the first can not.
I'm loading the column information using Angular, and so far I've had no real struggle implementing the 1-3 column layout.
But when I try to make this work smooth - e.g. using animations - things get weird. I don't really know how I can animate the (dis)appearance of one of each columns.
Here's what I have so far: Codepen example
<div class="container" ng-controller="Controller as ctrl">
<div class="column" ng-repeat="column in ctrl.columns" ng-class="[column.mode, column.color]" ng-show="column.open">
<button ng-click="ctrl.close(this)" ng-show="column.id != 0">Close</button>
<p ng-click="ctrl.open(this)">Name: {{column.name}}</p>
<p>Open: {{column.open}}</p>
<p>Mode: {{column.mode}}</p>
<p>Color: {{column.color}}</p>
</div>
</div>
CSS:
.container {
height: calc(100% - 50px);
display: flex;
}
.column {
padding: 10px 0 0 10px;
overflow-y: auto;
}
.column-narrow {
flex: 33;
}
.column-wide {
flex: 66;
}
.column-full {
flex: 100;
}
The second and third column can be triggered by clicking the name paragraph.
Don't worry about the colors, they're definitely not final and are used only for a clear visual difference between containers etc.
Can any one of you offer me a CSS(3) solution to this? If my code can be optimised please do, as I'm currently learning Angular.
There is not a lot of code needed to get some basic animations working.
The ng-show and ng-hide directives already provide support for animations out of the box. That means that AngularJS will add animation hooks in the form of additional classes ng-hide-add, ng-hide-add-active, ng-hide-remove, ng-hide-remove-active.
So these classes get added to your CSS column.
I literally only had to add these CSS lines to make animations work in your Codepen.
.column.ng-hide-add.ng-hide-add-active,
.column.ng-hide-remove.ng-hide-remove-active {
-webkit-transition: all linear 0.5s;
transition: all linear 0.5s;
}
Here is the updated codepen:
http://codepen.io/anon/pen/XbVLxO
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.
Improve this question
We have created the div using ng-bind directive in angular js. We are not able to apply style property to that same div
<div ng-bind-html="test"></div>
in contrller file i defined test variable as
$scope.test="<div style="background:red;"></div>
We need to apply the style property. using CSS property i can able to do. But each time the background needs to be changed.
may be wat you want is this:
<div ng-style="{'background-color': bgColor}"></div>
in your controller
$scope.bgColor = "red";
I dont know what you want but the only thing wrong with your code is yo uneed ng-bind-html-unsafe ... assuming you are using a version of angular < 1.2.
ng-bind-html runs the code through a $sanitize service, which checks for unsafe code. In your example I and "style" will be stripped out. The unsafe version does not perform this check and as a result if you use it in certain situations where you dont have complete control over(e.g. WYSIWYG editors saving to your database and displaying the comments.) the data you can have punks running around doing malicious scripts.
Example fiddle: http://jsfiddle.net/pW7WY/
Supporting code.
<div ng-app>
<div ng-controller="Ctrl">
<div id="nick" ng-bind-html-unsafe="test"></div>
</div>
</div>
--js
function Ctrl($scope) {
$scope.test='<div id="child" style="background:red;"></div>'
}
--css
#nick{
width: 300px;
height: 300px;
}
#child{
width: 200px;
height: 200px;
}
So, this is an odd one...
I've got basic pagination code:
<div class="pagination">
< 1 <a class="current">2</a> 3 >
</div>
And I want it all centred, so I'm using inline-block on the anchor tags. Simple enough, stripped down CSS code:
.pagination{text-align:center; margin-bottom:20px;}
.pagination > a{display:inline-block; vertical-align:middle; margin:0 2px 0 1px;}
.ie7 .pagination > a{zoom:1;}
.pagination .next,
.pagination .prev{width:26px; height:38px; text-indent:-9999px; overflow:hidden;
background:url(../images/page-arrows.png) no-repeat;}
.pagination a{width:37px; height:31px; line-height:32px; font-size:15px; font-weight:bold; color:#7e7e7e;
background:url(../images/page-numbers.png) left top no-repeat;}
Problem is that, NOTHING is displaying in IE7 (at least IE7-mode of IE9). I'm well aware of the display-inline bugs that IE7 has, but those only apply to elements that aren't inline by default. I've added in a zoom:1 anyway though for good measure.
If I put a background colour on the .pagination wrapper, that wrapper does indeed show up with the background colour, but the elements inside just aren't showing!
I've tried the usual IE 'fixes' ...position:relative, zoom:1, height:1% on any and every element, but not luck.
What am I missing?!
After some experimenting in JSFiddle I've managed to discover that the problem relates to this particular rule
.pagination .prev {text-indent:-9999px; }
Disabling this fixes the issue but is not ideal as you would then have the text charecter appear on top of your background images.
Interestingly enough your .next does not cause the same issue. with that in mind added an to either side of your paging control (so your center alignment dosnt get skewed) and it seems to of fixed the problem.
<div class="pagination">
< 1 <a class="current">2</a> 3 >
</div>
JSFiddle available here (background images replaced with solid colors for obvious reasons)