Develop Reference

Add div element in ul list

I have some <li> elements, like this:
<ul class="some_class">
<li></li>
<li></li>
...
<li></li>
</ul>
And in my css file I have:
.some_class > li
I want to change some of that li elements by jQuery. My idea is to have something like this:
<ul class="some_class">
<div id="some_id">
<li></li>
<li></li>
</div>
...
<li></li>
</ul>
And change its by $("#some_id").html(). But its fails, because of css. I don't want to change css, cause its template css, and it's become very difficult to make changes in it.
Is there some other methods to perfom this?

Given the two pieces of source code you provided, your problem is not the CSS per say, but the way you changed the DOM, making the CSS invalid:
Solution 1:
Change:
.some_class > li
To:
.some_class li
Because in your code manipulation your <li></li> are now direct descendants of some_class your CSS is broken. In CSS > means direct descendant.
Solution 2:
If you don't want to change the CSS just add a class to the <li> you want to change, but do not nest them inside another div.
Note: given the comments about invalid HTML: Solution 2 will not cause a problem with your HTML, and for solution one, replace DIV for another UL

There are lots of ways to target elements, and especially with jQuery this is a breeze.
Of course you can just add a class to each of the elements you want to target, but there are lots of ways to do it without changing your markup at all. For example, you can select using the actual index of the element within the parent using eq(); use pseudo classes like first-child, last-child; use jQuery extensions like :even or :odd; use nth-child to select repeatable patterns like every third element (nth-child:(3n+3))...

If a element hasClass then display:none;

I am trying to use the hasClass javascript element to see if it should make a div display none or keep it displayed as normal.
Here is the code snippet of what I currently have
if (!$('cool').hasClass('hot')) {
}
I want it to display none if it has class hot. What code would I use to do this?
EDIT: Alright so I have read the comments. I am not exactly sure how hasClass works but from what I have gathered it uses a html tag so it checks if it has a html tag.
I just want it to check if a div has the class "hot" that is will not appear.

Forget the if statement, just select only elements that match your condition in the first place.
jQuery('cool.hot').addClass('foo'); // Where .foo { display: none; }
NB: There is no <cool> element in HTML.

You could also use the :not() selector based on the OP's original premise -
(I'm assuming that 'cool' and 'hot' are classes in this example)
$('.cool:not(.hot)').css({'display':'none'});
You could also use the .not() method -
$('.cool').not('.hot').css({'display':'none'});

How do I style every last element of every line/row differently?

I've been trying to create a grid using
display:inline=block
I need to style every last element of every line/row differently. I tried
nth-child
nth-of-type
However, when I use that, it gets mixed up with my other grids. So how do I do it without adding new classes?

As far as i've seen from your code, you cannot use nth-child to achieve your goal. I will try to explain with an example:
you want the 4th and the 8th child of the section class="four" to be coloured red. In order to use nth-child or nth-of-type, you have to reference to children starting from their parent, i.e. body. So it's difficult to say what number in the list of body's children are the 4th and the 8th children of section class="four", and it's not flexible at all.
I think you are using it in the wrong way, something like section.four:last-child, which is not correct. Please check: w3schools link
Furthermore, nth-child and nth-of-type cannot be used with a selector but only with an element, so no way to do something like .four:nth-child (in the case you make a div with class="four" outside your sections).
So the only way, without adding more classes is jquery, like this:
$('.four').last().css('background-color', 'red');

In CSS3, if you associate every nth-child with a class of some type and every nth-of-type with another class use can style each one differently.
For instance,
<html>
<div class="nth-child">
//some code
</div>
<div class="nth-of-type">
//some code
</div>
</html>
Then in you CSS file you would do something similar to this:
.nth-child
{
//style rules
}
.nth-of-type
{
//style rules
}
I hope this is what you were looking for, without a posted example it is kinda hard to understand what you exactly mean. But if you want to us JS for this then you would create a JS function
obtain all elements in your page using "var elements= document.getElementsByClassName("nth-child")"
the you would loop through "elements.length" setting each element style to "none"

adding inline style to last li using jquery

I would like to add an inline style to the last LI that is generated with the ASP:repeater control.
I can't add a css class, i need to some how count the last li with the class called:
class="tile lower-boxes icon_email"

If I've understood your question, then the following should work for you:
$(".tile.lower-boxes.icon_email:last").css("color", "#C00");
Obviously, that selector and the CSS method can be changed to your needs. You can also add a class to the element, which would be preferable:
$(".tile.lower-boxes.icon_email:last").addClass("foo");
More info on the :last selector.

Jquery has a last function that will let you choose it functionally.
$('li.tile').last()
or you can use the :last selector
$('li.tile:last')
Edit: Fix Bad link

we can also use jQuery :last Selector..
e.g:
$("li:last").css('background-color', 'yellow');
I know the question is quite old but thought it might be helpful for others ..

Change name of a html class

I use a website, which shows information i have no use for, so i tried to hide some of it with Stylish, an addon for Chrome to insert custom CSS.
I will try to explain better.
<div class="splitscreenleft"> <div id="toplevel"
<div class="splitscreenleft"> <div id="coursesection"
I want to hide one of those. Everything above splitscreenleft is the same on both. So the only difference is the div id below.
I must somehow hide one of the two classes based on the name of the div below it i think.
Any solutions to this problem?

You should be able to do this either via CSS or JavaScript.
You probably don't even need to search the children out. You can probably just pick the first or second one that appears on the page and style that. To do via CSS, use the first-of-type selector - http://www.w3.org/TR/css3-selectors/#first-of-type-pseudo
div.splitscreenleft:first-of-type { display: none; }
To do this via JavaScript, you can find the parent object and then hide it:
document.getElementById("toplevel").parentNode.style.display = 'none';
You should be able to do it similarly in jQuery:
$(".splitscreenleft:has(#toplevel)").hide();​

This can be accomplish by CSS, using structural pseudo-classes alone:
.parentClassName .className :nth-child(n) { display: none; }
Where n is the element you want to select. In your case you have two elements with the same class. To hide the first one, just replace n with 1, or 2 to hide the second one. You get the idea.

If you can't get access to jQuery with JS (haven't tried in chrome), you could always say
$('#topLevel').parent().hide();

the code below can change the class you defined in style sheet.
document.getElementById("testPara").className = "yourclass";