-3

So I'm using the Stylish addon to edit a web page to my liking. There is a ul element and I want some of the items to become icons, and some of them to disappear. So I set it all up and it works fine. However, sometimes the website adds one more element to the list and screws everything up because I'm using nth-child selectors and obviously when the number of each element changes it breaks my css.

So I was wondering if there is a better way to select the li elements other than nth-child? A more specific way? Each of them has a header...is there some way of using that to select them?

Another idea I just had is maybe I could count backwards from the last li because the new list item is added towards the top...is there a way to do that?

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Lemons
  • 17
  • 1
  • 5
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors There are many other selectors besides `nth-child` obviously. Only you know the structure you're trying to target (since you've not included it in the question) and how you're deciding what changes to make. – Heretic Monkey Dec 14 '16 at 23:34
  • Please add a [mcve] –  Dec 14 '16 at 23:35
  • Just out of curiosity, why don't you want to use the `nth-child()` selector? – GROVER. Dec 15 '16 at 00:02
  • @Lemons If you want people to put effort into helping you for *free*, perhaps you could put effort into abiding by the community guidelines? – Rob Dec 15 '16 at 00:54

2 Answers2

1

You can use another selector like a attribute for example the data attribute.

Also, you can use other selectors for example a class or id

HTML:

<ul>
    <li id="id-1" class="id-1" data-id="1">Element</li>
</ul>

CSS:

li#id-1{
    //something...
}
// or
li.id-1{
    // something...
}
// or
li[data-id="1"]{
    // something...
}

Updated:

CSS:

li:first-of-type{
    // something...
}
// or

li:last-of-type{
    // something...
}

Regards

Radames E. Hernandez
  • 4,235
  • 27
  • 37
  • I have no way to add that information. As I said I'm modifying an already-existing website through Stylish I'm not building a website from scratch here... – Lemons Dec 15 '16 at 00:23
0
<style>
li:last-child {
 /* style goes here*/
}
</style>

will get you to the last element of the list if that is what you are referring to

bob
  • 983
  • 11
  • 21