I want to know how we can access nth element of an <li> using CSS in IE6/IE7.
HTML:
<ul class="myUL">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
Now suppose I want to access Link2, how to do that?
Note: Without using javascript.Only through CSS.
You can't. Give it a unique class name.
You can do :first and :last but not n'th and I'm not sure they work in IE6 either.
<ul class="myUL">
<li class="link1">Link1</li>
<li class="link2">Link2</li>
<li class="link3">Link3</li>
</ul>
and in CSS, reference ul.myUl li.link2
As Ian corretly stated, can't do that with static CSS. You could however use JavaScript.
HTML:
<ul class="myUL" id="myUL">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
JS:
var n = 2;
nthElem = getElementById("myUL").childNodes[n-1];
nthElem.style = "color: red";
//or
nthElem.className = "cssClassForNthElem";
Just like Ian says, this is impossible in IE6 and AFAIK in IE7 as well. IE7 and IE8 actually support the :first-child selector from CSS 2.1 (I'm sure you can guess what that does), but not :nth-child nor :last-child which are CSS 3.
Related
I am practicing OOCSS now but I meet a problem.
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
If I want to style these 3 <li> items separately I will do:
li:nth-of-type(1) {}
li:nth-of-type(2) {}
li:nth-of-type(3) {}
But according to OOCSS we should use class to style the elements, like:
<ul>
<li class="li-1">a</li>
<li class="li-2">b</li>
<li class="li-3">c</li>
</ul>
.li-1 {}
.li-2 {}
.li-3 {}
Now seems OK but what if I have 10 <li> I have to add 10 classes which looks dumb to me.
Which style should I use? Can I use those that other than classes to style the elements, based on OOCSS?
Well, technically I think what they are referring to is that you should use classes instead of html element identifiers.
So perhaps doing something like:
<ul>
<li class="li">a</li>
<li class="li">b</li>
<li class="li">b</li>
</ul>
And then just use your original styles like:
.li:nth-of-type(1) {}
.li:nth-of-type(2) {}
.li:nth-of-type(3) {}
In your case you're basically using classes as you would use an id. Classes are supposed to identify multiple elements.
Can you please let me know how I can target an element with a class which has only specific ID?
For example in the following code I need to change the size of only the class which also has the foo ID.
<ul>
<li class="sam">This is not Target</li>
<li class="sam">This is not Target</li>
<li class="sam" id="foo">This is The Target</li>
<li class="sam">This is not Target</li>
<li class="sam">This is not Target</li>
</ul>
I already tried this
#foo .sam {color:green}
but it didn't work. I know that is simply possible in css to target the id element but in this scenarios I have to change the class properties only for that specific item.
You need to remove the space:
#foo.sam { color: green }
I am using ng-repeat to show list items with some text. And I want every single item to be indented 10-20px to the right from the previous one. I don't have much experience with css.
<li ng-repeat="todo in todos"
ng-class="{'selectedToDo': (todo.id == selectedToDo)}">
{{todo.toDoText}}
</li>
Here is a jsFiddle with my code.
Thanks in advance!
you may use ng-style to solve your problem:
<li ng-repeat="todo in todos"
ng-class="{'selectedToDo': (todo.id == selectedToDo)}"
ng-style="{'margin-left': 10*$index+'px'}">
{{todo.toDoText}}
</li>
$index is a varibale that will be set by ng-repeat. You may use this to calculate your style.
Change your template with following::
<div ng-controller="MyCtrl">
<ul>
<li ng-repeat="todo in todos"
ng-class="{'selectedToDo': (todo.id == selectedToDo)}" style="text-indent: {{$index * 10}}px">
{{todo.toDoText}}
</li>
</ul>
</div>
I have 2 ul elements in my document. How can I find the first of the 2 using PrototypeJS? I tried this code:
first = $$('ul[class="level0"]')[0];
second = $$('ul[class="level0"]')[1];
Only first is filled, the second is empty. Any ideas? This is my html:
<ul id="nav">
<li class="level0 nav-1 first level-top parent">
<ul class="level0">...</ul>
</li>
<li class="level0 nav-2 last level-top parent">
<ul class="level0">...</ul>
</li>
</ul>
Thanks :)
Instead of using the attribute CSS selector use the class CSS selector
first = $$('ul.level0')[0];
second = $$('ul.level0')[1];
but otherwise that should work
there are other methods as well $$() returns an array of elements (even if is one) and you can refer to the .first()
first = $$('ul.level0').first()
Please let us know if fixing the HTML worked or if you are getting any errors in your javascript console - that could lead you to a different problem
Use
first
$('nav').down('.level0');
second
$('nav').down('.level0', 1);
Cheers
Hi all having a few problems with my CSS
I am trying to highlight a link on the navigation based on the page the user is on.
I have this style which works as I would like it to do, but when I pass a query-string into pcisHPprofile.aspx the CSS is not working. Does anyone know how i can get this style to work with query-strings?
body form[action="pcisHPprofile.aspx"] #btnuser
{
padding: 18px 4px 5px 4px;
background-image: url(../images/tabbluleft.gif) ;
background-repeat:no-repeat;
color: #fff;
}
<div id="nav" class="nav" >
<ul>
<li id="tab1">
<a id="btnsession" href="pcissessionlist.aspx" > <span >Session</span></a>
</li>
<li id="tab2">
<a id="btnsystem" href="pcissystemsettings.aspx" > <span >System Settings</span></a>
</li>
<li id="tab3">
</li>
<li id="tab4">
<a id="btnuser" href="pcisuserlist.aspx" > <span >User Logins</span></a>
</li>
<li id="tab5">
<a id="btninterpreter" href="pcisinterpreterlist.aspx" > <span >Interpreter Profile</span></a>
</li>
<li id="tab6"><asp:LinkButton ID="btnreports" runat="server" Visible="false" cssid="cssreports" PostBackUrl="#"><span>Reports</span></asp:LinkButton></li>
</ul>
</div>
I assume that the #btnuser ARE some buttonS inside the some forms, where one of the forms have action="pcisHPprofile.aspx"?
If that is correct, then your error is the fact that you have many buttons with the same id attirbute id="btnuser". The ID attibute MUST be uniqe on the page. change the id="btnuser" to class="btnuser" on the buttons and your selector from:
body form[action="pcisHPprofile.aspx"] #btnuser {
}
to
body form[action="pcisHPprofile.aspx"] .btnuser {
}
Then it should work.
In the first form it might work only if the FIRST button with id="btnuser" is actually inside the form with action="pcisHPprofile.aspx". If it is inside any other form, then it will not work.
Best regards,
SWilk
UPDATE:
After OP updated the question, I think that this form of selector should work:
body form[action^="pcisHPprofile.aspx"] #btnuser {
...
}
It would a element with id=btnuser inside a form, which action begins with "pcisHPprofile.aspx". It would not matter if the acutal action attibute contain only "pcisHPprofile.aspx" or "pcisHPprofile.aspx?any-parameters&and=some-values".
Best regards,
SWilk
Using action attribute for styling is a bad practice. Just give your form a name, class or ID like <form class="pcisHPprofile" action="pcisHPprofile.aspx"> and then apply CSS style to that name/class/id.
form.pcisHPprofile {
padding: ...
Found a working solution. a little hacky which I am not 100% keen on but it works.
I changed the query string to look like this
profile.aspx?-&username=
from this
profile.aspx?username=
and I changed the style to
Form[action|="pcisinterpreterprofile.aspx?"] #tab5
{
background-image: url(../images/tabbluright.gif);
background-repeat:no-repeat;
}
The difference is that I have changed the = to an |=.
[att|=val]
Represents an element with the att attribute, its value either being
exactly "val" or beginning with "val"
immediately followed by "-" (U+002D).
This is primarily intended to allow
language subcode matches (e.g., the
hreflang attribute on the a element in
HTML) as described in RFC 3066
([RFC3066]) or its successor. For lang
(or xml:lang) language subcode
matching, please see the :lang
pseudo-class.
by doing this the css selector works on pages with query strings. you just need to make sure the query string has at least ?- at the start. As I said at the last its not great but works.