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.
Related
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>
Let's say I created a menu titled "Main Menu" from the admin panel and I need to customize the default markup, e.g. let's say I want to modify/replace the <ul>, <li> as well as the surrounding <article> and <nav> tags.
I assume that I have to come up with something like this in my Parts.MenuWidget.cshtml alternate template.
<ul class="a b c">
for each item in menuItems:
display("<li>" + item + "</li>")
end
</ul>
How do I do that in Orchard?
That's quite simple.
You could first create an alternate for you MenuWidget like so:
Parts.MenuWidget-MyZoneName.cshtml
<nav>
<div class="logo">
#Html.Partial("_Logo")
</div>
<ul>
#*Display all the stuff added in the admin*#
#DisplayChildren(Model.Menu)
#*Add additional stuff. Of course you could also add it as MenuItem to the Menu-Model*#
#if ( Request.IsAuthenticated )
{
if ( Authorizer.Authorize(StandardPermissions.AccessAdminPanel) )
{
<li>
<a href="/Admin">
Admin
</a>
</li>
}
<li>
<a href="~/Example1">
Extra1
</a>
</li>
}
else
{
<li>
<a href="~/Example2">
Extra2
</a>
</li>
}
</ul>
</nav>
And then go on and do something similar for your MenuItems. For example:
MenuItemLink.cshtml
#Model.Text
Another thing that's worth mentioning is that you can either only provide an alternate for a specific shape like the MenuItemLink above or just provide an alternate for the base MenuItem shape which will then be used for every MenuItem type that exists.
(Maybe those are not the best examples, but I guess they'll do the job ;) )
Update:
In order to remove/modify the tags you can create an alternate for MenuItem.cshtml and look at this part:
if (HasText(renderedMenuItemLink))
{
var tag = Tag(Model, "li");
#tag.StartElement
#renderedMenuItemLink
if (items.Any())
{
<ul>
#DisplayChildren(Model)
</ul>
}
#tag.EndElement
}
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
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.