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

I’m planning to create a theme/template for a website, is it safe to assume that I’ll use ff’s CSS3 selectors?

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

Already suitable for most users?

And do people who design websites for a living or create widely used websites for commercial use such selectors?

nth-child is safe to use. There are some mobile browsers that don’t support it, but most are widely used. Even old IE supported it.

If you want to check if a selector is safe to use, check out caniuse. This will show you which browsers can use the selector, broken down by version. Combine this with user statistics and you should be able to see what is safe to use without harming your client base.

Thank you for your detailed reply, I really appreciate it!

Only if you know the HTML will never change or remain in a consistent structure.

If the html is updated frequently, you may end up targeting the wrong element due to the position change.

Use the simplest selector possible, and use the nth child for consistently implemented constructs. If the only reason you’re using the nth-child selector is to avoid adding classes, I think it was the wrong approach.

However, if you want to stripe every other row in your table, it’s better to use nth-child.

course horse

If the html is updated frequently, you may end up targeting the wrong element due to the position change.

Elements are a fixed amount and are never or rarely updated.

If the only reason you’re using the nth-child selector is to avoid adding classes, I think it was the wrong approach.

That’s what it feels like, but it’s not accurate. As you can see, the child block using the transform scale (blue block) has a hover effect and overflows the container (red block).

Here’s what’s happening:

So what I’m trying to do instead is use transform-origin whenever the item being hovered is to either side (right or left). This will not overflow the red container like this (green will be the global/body container:

Note that I intend to break the amount of blocks (black stuff) per row/row depending on the user’s screen resolution. Is it still ideal?

I also considered using javascript or jquery to detect screen resolution changes and adding a class to the items on both sides, but CSS is a much better choice and will be lighter/faster. I was wondering if that was the case.

I don’t understand why you need this complicated selector.
My knowledge of CSS is lacking to determine if the goal of automatically moving a “popup” rectangle onto the screen without using JavaScript is achievable.

But let’s assume you want javascript:

As for your drawing, I believe each black square has a specific class.
When you add a mouseover event listener to each element using this class, you get the element as a parameter to the callback function called by the listener. Now you can do whatever you want with the element.

So what am I missing that I need the nth child selector?

My knowledge of CSS is lacking to determine if the goal of automatically moving a “popup” rectangle onto the screen without using JavaScript is achievable.

The square/block is not a “popup”, it’s a hover effect.Use transform: scale() on hover as you can see in beginning In the image, all elements on either side overflow their container (the red one).

The first solution I came up with for this 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 as it can be easily adjusted for any screen/resolution (@media screen(){}) requires a break. However, whenever you need to do that, you’ll need to unset the previous ntn-child() with a larger number, so if you have more than 10 screen/resolution breaks, some more code is You will need.

Using javascript or jquery you can add classes to elements on both sides. For example, let’s say “.right” and “.left”. This uses less css code, only two, and unsets in every resolution that goes through CSS but instead uses js/jquery to add/modify classes.

So, as a newbie, I’m wondering which one is actually better?

When using ranged media queries, you only need to set two at a time and not undo the others.

for example

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

Does this mean that it’s better to use CSS?

If it can be done without js, it’s better if it’s not too complicated.

js you probably want to hook into the resize event. Performance will suffer from js on slow machines unless you debounce it first.

understood.
Thank you for your time. Thank you very much.

I don’t know if this helps, but I use this kind of grid to do the same thing, but without blowing it outside the container (which is probably a good thing, unless there’s enough space around it) .

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.