Im planning to make a website theme/template and I was wondering, is it safe to assume that using the CSS3 selector of the ff:
is it suitable for most users already?
And for those people who design website for a living or make website for commercial & widely used, would you be using such selector or not?
nth-child is safe to use. There are a couple mobile browsers which don’t support it, but for the most part it’s widely available - heck, even 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 which browsers can use a selector, broken down by version. Combine this with your user stats, and you should be able to see which are safe to use without harming your client base.
Thank you for the in-depth response, i really appreciate it!
Only when I know that the html will never change or will remain consistently structured.
If the html is often updated then you may end up targeting the wrong element as positions have changed.
Use simple selectors where possible and nth-child in constructs that are consistently implemented. If the only reason you are using the nth-child selector is to avoid adding a class then I’d say it was the wrong approach.
However if you were striping every other row in a table then it would be a good approach to use nth-child.
Horses for courses 
If the html is often updated then you may end up targeting the wrong element as positions have changed.
The elements would be in fixed amount and would not be updated or just rarely.
If the only reason you are using the nth-child selector is to avoid adding a class then I’d say it was the wrong approach.
It’s kind of like that, but not exactly.Basically, im making this bunch of featured block (red container with child blocks inside) and im gonna 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 transform scale (the blue block) which then makes it overflow the container (red block).
Here’s what’s happening:
So what im trying to do instead is use transform-origin whenever the item being hovered on is on the either side (right or left) so it doesn’t overflow from the red container like this (green would be the global/body container:
Noted that im gonna be breaking the amount of blocks (black ones) per row/line depends on the user’s screen resolution, is it still ideal?
I’ve also thought about using javascript or jquery to detect screen resolution changes and add class on items on both sides but i was wondering if CSS is a much better choice and would be lighter/faster?
I don’t understand for what you need this complicated selectors.
My CSS knowledge is much to low to tell you if you can reach the goal to move the “popup” rectangles into the screen automatically without using javascript.
But lets assume you need javascript:
Just regarding you drawings I would assume 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 parameter in the callback function which is called by the listener. Now you can do whatever you want with the element.
So what do I miss that you need an n-th child selector?
My CSS knowledge is much to low to tell you if you can reach the goal to move the “popup” rectangles into the screen automatically without using javascript.
The squares/blocks aren’t “popup” but a hover effect. I use transform: scale() on hover so as you can see on the first image, any elements that is located on either side overflows from it’s container (red one).
The first solution i came up with this is by using nth-child(5n) & transform-origin on every 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 the resolution as i could adjust it easily with whatever screen/resolution (@media screen(){}) break i need. However, whenever i needed to do that i also have to unset any previous ntn-child() with higher number so there’d be several more codes if i have over 10 screen/resolution breaks.
Now with the javascript or jquery, i could just use add class on elements that sits on both side, let’s say “.right” and ".left " and then i can use less css codes cause it’s just the two and don’t have to unset it on every resolution break through CSS but use js/jquery to add/change class instead.
So as a newbie, im actually wondering which one is better go with?
If you use media queries with a range then you only need to set 2 at a time and you won’t need to undo others
e.g.
@media only screen and (min-width: 360px) and (max-width: 768px) {
// do something in this width range.
}
Does it mean it’s better go with CSS with this type of thing?
If you can do without js it’s better unless it’s too complex.
If you use js then you’d probably have to hook into the resize event and then already you’re getting janky performance from the js on a slow machine unless you debounce it first.
Understood.
Thank you very much for the time & help, I really appreciate it!
Not sure if this is helpful or not, but this kind of does the same thing using grid, though it doesn’t blow outside the container (which is probably a good thing unless you have plenty of space around it)
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.