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 }
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.
Is there a way to have multiple router-links inside a li and that li gets the active class in vue2?
I was thinking in something like this: https://jsfiddle.net/tejitak/o44z47ag/5/
<div id="app">
<ul>
<li>
<ul v-link-active>
<li>
<a v-link="{ path: '/foo' }">Go to Foo</a>
</li>
<li>
<a v-link="{ path: '/bar' }">Go to Bar</a>
</li>
</ul>
</li>
<li>
<a v-link="{ path: '/baz' }">Go to Baz</a>
</li>
</ul>
<router-view></router-view>
</div>
It's supposed to be used in a menu which as submenus.
The migration docs only references a single link so I don't know if this is possible: https://v2.vuejs.org/v2/guide/migration-vue-router.html#v-link-active-replaced
You can use router-link like this to do that:
<ul>
<router-link tag="li" to="/foo">
<span>
<strong>
<a>/foo</a>
</strong>
</span>
</router-link>
</ul>
Here's the documentation for vue-router: http://router.vuejs.org/en/
Here's the documentation for router-link: http://router.vuejs.org/en/api/router-link.html
Here's a demo for nested router-links: https://jsfiddle.net/wx17jh2y/
<ul>
<router-link tag="li" to="/foo">
<span><a>Foo</a></span>
<ul>
<router-link tag="li" to="/bar">
<span><a>bar</a></span>
</router-link>
</ul>
</router-link>
</ul>
If you want to group multiple links underneath one element that should be considered active (e.g. using Bootstrap dropdowns), you can just make the parent element a router-link as well and prevent any interaction by setting the event attribute to an empty list. Example:
<router-link tag="li" to="/function" :event="[]">
<ul>
<router-link tag="li" to="/function/a"><a>Function A</a></router-link>
<router-link tag="li" to="/function/b"><a>Function B</a></router-link>
</ul>
</router-link>
See also the documentation on the event property on router-link.
I would not use router-link and instead bind to the href attribute on the anchor tags. If the links in the menu are static, then you may not even need to bind to the href attribute - just specify href="/foo" (at least that's how it worked in angular1). If the href needs to be generated, like if you're looping through menu items, then create the hrefs in a vue instance function and call it like :href="createHref(menuItem)" for example.
To assign the active class, I would assign the class if the href matches the current route (see https://v2.vuejs.org/v2/guide/class-and-style.html). The current route is in this.$route. Just make sure route is passed into the root app instance: https://router.vuejs.org/en/api/component-injections.html
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
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.