Css media

Is it ideal to use the :nth-child() selector? – HTML & CSS – SitePoint Forums

I’m planning to create a website theme/template and was wondering if it’s safe to assume that using the CSS3 selector from the ff:

  • nth-child()
  • nth-child(1n)
  • nth-child(1n) + div
  • nth-child(1n + 1)
  • nth child(3n – 2)

is it already suitable for most users?

And for people who design websites for a living or build websites for commercial and widely used purposes, would you use such a selector or not?


nth-child is safe to use. There are a few mobile browsers that don’t support it, but for the most part it’s widely available – heck, even the old IE supported it.

If you ever want to see if a selector is safe to use, look it up on caniuse. This gives a breakdown of browsers that can use a selector, broken down by version. Combine that with your user stats and you should be able to see which ones are safe to use without hurting your customer base.



5 likes

Thanks for the detailed answer, I really appreciate it!



1 like

Only when I know the html will never change or stay structured consistently.

If the HTML is updated often, you might target the wrong element because the positions have changed.

Use simple selectors where possible and nth-child in constructs that are consistently implemented. If the only reason you’re using the nth-child selector is to avoid adding a class, I’d say that was the wrong approach.

However, if you were crossing out every other row in a table, it would be a good approach to use nth-child.

race horses :slight_smile:



5 likes

If the HTML is updated often, you might target the wrong element because the positions have changed.

Items would be in fixed quantity and would not be updated or just rarely.

If the only reason you’re using the nth-child selector is to avoid adding a class, I’d say that was the wrong approach.

It’s a bit like that, but not exactly. Basically I make this bunch of featured blocks (red container with child blocks inside) and I’m going to do it like maybe 4 – 5x on the same page. As you can see I have a hover effect on the child blocks that uses the transform scale (the blue block) which then overflows the container (the red block).

Here is what happens:

So what I’m trying to do instead is use transform-origin whenever the hovered element is on either side (right or left) so it doesn’t overflow the red container like this one (the green one would be the global/body container:

I noted that I will break the number of (black) blocks per line/line depending on the resolution of the user’s screen, is this still ideal?

I also thought about using javascript or jquery to detect screen resolution changes and add a class on elements on both sides, but I was wondering if CSS is a much better choice and would be lighter/faster?

I don’t understand why you need those complicated selectors.
My knowledge of CSS is far too weak to tell you if you can achieve the goal of automatically moving “popup” rectangles around the screen without using javascript.

But suppose you need javascript:

Regarding your drawings, I assume that each black rectangle has a specific class.
When you now add a mouseover event listener to each element with this class, you will get the element as a parameter in the callback function which is called by the listener. Now you can do whatever you want with the item.

So what am I missing that you need yet another child selector?

My knowledge of CSS is far too weak to tell you if you can achieve the goal of automatically moving “popup” rectangles around the screen without using javascript.

The squares/blocks are not “popup” but a hover effect. I use transform:scale() on hover so you can see on the first image, all the elements on each side overflow its container (red).

The first solution I found is to use nth-child(5n) & transform-origin on all side elements. I came up with something like this:

.black-square:nth-child(5n){
     transform-origin: right center;
}
.black-square:nth-child(5n) + div {
     transform-origin: left center;
}

And it actually solved my problem regardless of resolution because I could easily adjust it with any screen/resolution (@media screen(){}) break I need. However, every time I needed to do this, I also had to remove any previous ntn-child() with a higher number, so there would be multiple extra codes if I had more than 10 screen breaks/ resolution.

Now with javascript or jquery I could just use add class on elements that are on both sides say “.right” and “.left” and then I can use less css codes because it’s just both and don’t have to disable it on every css resolution, but use js/jquery to add/edit the class instead.

So, as a beginner, I’m actually wondering which one is better to go with?

If you use media queries with a range, you only have to define 2 at a time and you won’t need to cancel the others

for example

@media only screen and (min-width: 360px) and (max-width: 768px) {
	// do something in this width range.
}

Does that mean it’s better to use CSS with this type of thing?

If you can do without js it’s better unless it’s too complex.

If you’re using js, you’ll probably have to hook into the resize event, and you’re already getting janky performance from js on a slow machine, unless you anticipate it first.



2 likes

Understood.
Thank you so much for the time and help, I really appreciate it!



1 like

I don’t know if this is useful or not, but this stuff does the same thing using the grid, although it doesn’t blow outside the container (which is probably a good thing unless you don’t have a lot of space around)



1 like