You'll often hear people say things like use a single class selector for everything and this can definitely be a very handy rule of thumb

クラス・セレクタはすべて1つでいいというようなことをよく耳にするが、これは非常に便利な経験則である。

Especially if you're early on in your CSS journey, but here at my channel

CSSを始めて間もない人は特にそうだろうが、私のチャンネルでは次のようなことをやっている。

I like to help people fall in love with CSS and one of the ways to do that is to take off our training wheels

私は、人々がCSSを好きになる手助けをするのが好きだ。

And so today we're gonna be looking at some

そこで今日は

Tricks that we can do to help when it comes to writing less code because when you just use a single class for everything sometimes you end up with a lot more code than you actually need and also look at some cool little user interaction tricks that we

また、ユーザーとのインタラクションに関するちょっとしたトリックも紹介する。

Can do with some more advanced CSS selectors and we're going to do that by diving into this example that I have here where we're gonna explore a whole bunch of different things and

もっと高度なCSSセレクタを使うことができます。この例を見て、いろいろなことを調べてみましょう。

The first thing we're gonna be looking at is you can see I have a navigation set up at the top

最初に見ていくのは、上部にナビゲーションを設定したことだ。

But I have bullet points because it's set up with a list and then I have a regular list here

でも、箇条書きにしているのは、リストで設定されているからで、ここには通常のリストがある

And then I have this image gallery set up with a list over here

そして、この画像ギャラリーをここにリストでセットアップしています。

And a lot of the times in our CSS

そして、CSSでは多くの場合

We'll get something like this to remove the bullet points because so many lists that we create don't need them

私たちが作成するリストの多くは箇条書きを必要としないので、箇条書きを削除するためにこのようなものを用意する。

The problem is when we do that

問題は、そうしているときだ。

Well, it helps with things like my navigation and my image gallery down here at the bottom

まあ、ナビゲーションとか、この下の画像ギャラリーのようなものには役立つんだけどね。

It doesn't actually help with this and I don't want to have to bring those styles back in. So, how can I do that?

実際にこれでは役に立たないし、それらのスタイルを戻す必要もない。では、どうすればいいのでしょうか？

Well, we can actually be a little bit more specific with the selector

まあ、実際にはセレクタでもう少し具体的にすることができる。

But in an interesting way because if we look here this has a class on it

しかし、面白いことに、ここにクラスがある。

This one doesn't and then the one that's further down over here also has a class on it

こっちにはなくて、こっちのもっと下にあるやつにもクラスがある

So I can actually select anything that has a class by putting an attribute selector here with my square brackets and just write class

つまり、属性セレクタを角括弧で囲んでclassと書くだけで、クラスがあるものなら何でも選択できるのだ。

And hit save and now the ones that have classes get the styling on it

そして保存を押すと、クラスがあるものにはスタイリングが適用される。

But if I have a UL without a class, well now we get no styling on there and we can do this in reverse, too

しかし、もしULにクラスがなければ、スタイリングはされない。

So you might want to come in and you might want to say UL and say not

ULと言いたいかもしれないし、ULではないと言いたいかもしれない。

Class and then you can select any UL that doesn't have a class because maybe you want to change your font size for some reason

Classを選択し、クラスがないULを選択することができます。

We can say one RAM or something and make your font size bigger or smaller or whatever you need to do

RAMを1つ使うとか、フォントサイズを大きくするとか小さくするとか、必要なことは何でもできる。

But you can use any element that either has a class or doesn't have a class this way which can really come in handy

しかし、クラスを持っている要素も、クラスを持っていない要素も、この方法で使うことができる。

And actually we look at my navigation right here. You can see the signup link

私のナビゲーションをご覧ください。サインアップのリンクが見えます。

That's just right there and there's a problem with it where it's hard to read the text because my normal button should look like this

ちょうどそこにあるのだが、テキストが読みにくいという問題がある。

But my class is overwriting it and that's because I styled it this way where I have a descendant selector on there

しかし、私のクラスはそれを上書きしている。それは、このようにスタイルを設定し、そこに子孫セレクタを置いたからだ。

So this is higher specificity than my normal button styling and it's it's ruining my button that's up there so there are other options here one of them would be to do what we just did here where we could do that exact thing

通常のボタン・スタイリングよりも特殊性が高く、せっかくのボタンが台無しになってしまう。

And say not and in the not say class and hit save so then we're only styling regular links

そして、"not "と言い、"not "の中で "class "と言って保存を押す。

But if you have a link that does have a class in there or something then it just gets its regular

しかし、もしリンクにクラスが含まれていたりした場合は、通常の

Styling which can definitely come in handy and I've definitely used this one before so in certain situations

スタイリングは間違いなく便利で、私も以前はこれを使ったことがある。

Whether it's just even more generic things or to be a little bit more specific in how you want to style things

より一般的なものであれ、もう少し具体的なスタイリングであれ......。

Being able to choose something for a class can definitely be pretty useful. Okay. So next up we're gonna jump down to this

クラスで何かを選べるというのは、とても便利なことなんだ。さて、次は次のステップに進みます。

Showcase that's right here. Let me move my head down to the bottom

ショーケースはここです。下の方に移動させてください

So I don't cover any of these images and here I just have a list set up with my showcase list and then list items

だから、これらの画像はカバーせず、ここではショーケースのリストとリスト項目を設定するだけです。

For each one and then an image inside of each one of those

それぞれの画像と、その中にある画像。

Really quickly. I don't have any alt text on here

本当に素早く。ここにaltテキストはありません

I left it blank because I just set up a quick demo

空欄にしたのは、簡単なデモをセットアップしただけだからだ。

This is definitely a do as I say and not as I do because you should definitely be putting alt text on images if they're

というのも、画像にはaltテキストを付けるべきだからだ。

Like this, this is not really decorative. You should have some sort of context of what those images actually are

このように、これは装飾とは言えない。これらの画像が実際に何なのか、何らかの文脈を持つべきだ

But if we come in here

でも、ここに入れば

This is how I've set up my grid where I'm using my repeat syntax here to set up six columns

このようにグリッドを設定し、リピート構文を使って6つのカラムを設定している。

And what I want to do is highlight the ones in the middle to sort of balance out my grid a little bit here and we

そして、グリッドのバランスを取るために、真ん中のものを強調したい。

Can do that in an interesting way. So if I come in and we do that showcase list and I'm gonna select

それは面白い方法でできる。ショーケースのリストで、次のように選択します。

My li and I'm gonna do nth child or it could also be an nth of type

私のリと私はn番目の子供を作るつもりだし、n番目のタイプでもいい。

It depends how you want to do it, but nth child will work fine for what I'm gonna do here

どのようにしたいかによるが、私がここでやろうとしていることでは、n番目の子で十分だ。

And let's select this one here. So I have six. That's my seventh one

そしてこれを選んでみよう。これで6つ揃いました。これが7つ目

So I could just put seven here and hit and then I'm gonna say grid

だから、ここに7と書いて、"グリッド "と言うんだ。

Column is two and this is not the trick that we're looking at

カラムは2つで、これは我々が見ているトリックではない

Let's do a span to not just the two and it gets bigger because now we're spanning across

つのスパンだけでなく、2つのスパンにもスパンをかけてみよう。

Two of the columns on my grid

グリッドの2つのカラム

Ideally, I also want to do that for this image and this image

理想的には、この画像とこの画像もそうしたい。

So we get those ones all bigger and then it will fill up everything and it's gonna balance out

だから、それらをすべて大きくして、すべてを埋めてバランスを取るんだ

So I could take this and then also do it for the 8th and also do it for the 9th

だから、これを受け取って、8日にもできるし、9日にもできる。

But there's another way and we can use this to select ranges of content as well and so the first thing we want to do is actually say it's gonna be an n plus 7 and what that means is it's

しかし、もうひとつの方法があり、これを使ってコンテンツの範囲を選択することもできる。

Gonna select the 7th and every one after that. So we're going there. We're selecting all of this

7番目とそれ以降のすべての選手を選ぶつもりだ。そこでこの

But now I just want to exclude these ones at the bottom

でも今は、一番下にある以下のものを除外したい。

I only want it to be these three that are right here. So to do that attach. There's no spaces or anything like that

ここにあるこの3つだけにしたいんだ。だから、それをアタッチする。スペースも何もない

I'm gonna do an nth child again and say it's negative n plus 9 and the negative end

もう一度n番目の子供と同じように、負のnに9を足したものを負の末尾とする。

It means we're counting backwards. So we're gonna go from the 9th one and count backwards

これは逆算を意味するんだ。では、9番目から逆算してみましょう。

So now if I hit save it's selected the 7th the 8th and the 9th and of course I could change that

だから、保存を押すと、7番、8番、9番が選択される。

You know any range you want here

ここでは好きなレンジを選べる

I could do this starting at 3 and then it will go from the 3rd all the way to the 9th

これを3番から始めて、3番から9番まで続けることができる。

So starting at and ending at right there a simple comment here. It should be pretty easy to tell what's actually happening

というわけで、ここから始まり、ここで終わる......シンプルなコメントだ。実際に何が起こっているのかを知るのは簡単なはずだ。

Let's move this back to being 7 8 & 9

7 8 9に戻そう。

And yeah, it works really well

それに、とてもうまく機能している

And the reason this is working is because it's only finding things that match both of these so it has to be both an nth child 7 up and an nth child of 9 going backwards and so it selects the range of content. This is a really useful one in my opinion

そして、これが機能しているのは、この両方にマッチするものだけを探しているからです。つまり、n番目の子である7から上と、n番目の子である9から後ろの両方でなければならないので、コンテンツの範囲を選択するのです。これは本当に便利なものだと思う

You might not use it regularly, but you're super happy to know it exists when you do actually need it

定期的に使うことはないかもしれないが、実際に必要になったときにその存在を知ることができるのはとても嬉しい。

And now moving on to the next step

そして次のステップへ

We're gonna stick with our showcase grid here and I'm gonna look at two different ways

ここでは、ショーケースのグリッドにこだわり、2つの異なる方法を見ていきます。

We'd accomplish the same thing which is selecting every element other than the one that we're interacting with

つまり、相互作用している要素以外のすべての要素を選択することである。

So to be able to do that when I say interacting I'm gonna do it as a hover

だから、私がホバーとしてやるつもりで相互作用すると言ったときに、それができるようにするために

But this could work with a focus as well

しかし、これはフォーカスを当てても同じように機能する。

My images can't be focused and I wouldn't really want them to be but if you did this in a different way where you might have links or other things that are involved you could definitely do with this with focus states to and we're gonna say that we have my

でも、もしリンクや他のものが絡むような別の方法でこれを行ったとしたら、間違いなくフォーカスを合わせることができるだろう。

Showcase list once again and then on that showcase list

ショーケースのリストをもう一度表示し、そのショーケースのリストに表示する

We're gonna say a hover and then we're gonna select every image that's inside the showcase list and it's only gonna impact it when we're

カーソルを合わせると、ショーケースのリストにあるすべての画像が選択されます。

Hovering on the showcase list and we're just gonna do something simple

ショーケースのリストにカーソルを合わせて、簡単なことをします。

We're gonna lower the opacity down to like 8.5

不透明度を8.5まで下げます。

So if I hover anywhere you can see the whole list darkens because all the images are getting the opacity of 0.5

だから、どこかにカーソルを合わせると、すべての画像の不透明度が0.5になっているので、リスト全体が暗くなるのがわかる。

This is really important. We don't do it like this because this would look exactly the same right now but we wouldn't be able to overwrite things that are inside of it because if you take a parent and you reduce the opacity you can't go into one of the

これは本当に重要です。というのも、このままでは見た目はまったく同じですが、中にあるものを上書きすることができないからです。

Children and raise the opacity of that child

子供の不透明度を上げる

Whereas if we lower the opacity of all the images what we can then do we're gonna duplicate the selector right here and we're gonna say that we're gonna move this off of here showcase list image hover and

一方、すべての画像の不透明度を下げたらどうなるかというと、ここでセレクタを複製して、ショーケースのリスト画像のホバーからこれを移動させます。

The opacity will be 1 and so now whichever one I'm hovering on is actually going to get that opacity

不透明度は1になり、カーソルを置いたものが実際にその不透明度を得ることになる。

Which is kind of cool and this is working because of the cascade because these are equal specificity, right?

これはちょっとクールで、カスケードのおかげで機能している。

We have a class selector. We have the pseudo selector here

クラス・セレクタがある。ここに擬似セレクタがあります

And then we have the element selector and we get those same ones here just in a different order

そして、エレメント・セレクタがあり、ここでは同じものが異なる順序で得られる。

So same specificity this one wins because it comes second and

だから同じ特異性でも、これは2番手だから勝てるんだ。

That works and you could put a transition or something on here to make it look a little bit nicer, of course

もちろん、ここにトランジションか何かを付けて、もう少し見栄えを良くすることもできる。

And there is another way to do this the other way to do this is a little bit different though where what we can do is I'm going to comment this out and

もう1つの方法は、ちょっと違うんだけど、コメントアウトすることだ。

We're gonna come in and this could be really useful, but browser support isn't quite as good, but I'm gonna say showcase

しかし、ブラウザのサポートはあまり良くない。

List has image hover and let's start with that

リストには画像のホバーがあります。

Actually, we're gonna say yeah has image hover and

実際には、画像のホバーと

Here we're gonna say image and we can do the same opacity of 0.5

ここでは画像とし、同じように不透明度を0.5とします。

So now if I'm hovering on top of an image, you'll notice that they get the opacity of 0

画像の上にカーソルを置くと、画像の不透明度が0になっていることに気づくだろう。

There is a difference here though, because if I go in between the two of them

しかし、ここで違いがある。

We're not getting it because I'm in a gap now

今、空白期間だから取れないんだ。

So this is the difference with the opacity with these small gaps that definitely can lead to some flickering do apologize for that bother

そのため、このようなわずかな隙間による不透明度の違いは、チラつきにつながる可能性がある。

Do a little bit

少しだけ

But um, I'll try not to do that too much

でも、あまりそうしないようにするよ

But it's definitely like a potential downside

しかし、それは間違いなく潜在的なマイナス面のようなものだ

But it could also be potentially what you want because you might want this only to come into effect when you're specifically on whatever element you're building this interaction around and

しかし、このインタラクションを構築している要素が何であれ、その要素に特化したときだけ有効になるようにすることもできる。

The cool thing with this is if we come here we can do it now with a single selector by saying not hover

これでクールなのは、ここに来て、ホバーでないと言うことで、セレクタひとつでできるようになったことだ。

And this looks kind of weird for sure. We're doing basically the same thing we were doing here

そして、これは確かに奇妙に見える。ここでやっていることは基本的に同じだ

But we're doing it with a single selector because we're saying if my showcase list has an image that's being hovered on

ショーケースのリストに画像があり、その画像にカーソルを合わせると、次のようになります。

Every image that's not currently being hovered on will get the opacity of 0.5

現在ホバーされていない画像はすべて不透明度0.5になる。

So the has selector here is super cool super powerful and is actually getting to in a sort of acceptable level of browser support

このhasセレクタは非常にクールで強力であり、ブラウザのサポートレベルもある種の許容範囲に達しつつある。

So I'll put a link to the description so you can make your own mind up about it if it has good enough support or

だから、説明文へのリンクを貼っておく。

Not but being able to select all the siblings other than the current one you're interacting with can be quite useful

そうではないが、今対話をしている兄弟以外の兄弟をすべて選択できるのはかなり便利だ

And and you can do some interesting things with that

それで面白いことができるんだ。

So yeah, it looks a little bit strange

そう、ちょっと奇妙に見える

But once you understand what it's doing super cool selector right there and this next one just because I wanted to stick with the example

しかし、このセレクターが何をするものかを理解すれば、超クールなセレクターが完成する。

Here we're gonna stick with our showcase though

ここではショーケースにこだわることにする。

I'm gonna comment this out the finished code for all of this will be in the description down below though

コメントアウトしておくが、完成したコードは下の説明にある。

So there'll be a link to a code pen where you can play around with any of these if you want them

コード・ペンへのリンクがあるので、必要であれば、それらを使って遊ぶことができる。

But what we're gonna do now is one where it's about selecting proceeding and following siblings

でも、これからやるのは、プログレッシブを選択し、兄弟をフォローすることだ。

So let's say once again, we have my showcase list and in this case

もう一度、私のショーケース・リストを見てみよう。

I'm gonna do it on an LI and not the image just because if we come and look here

画像ではなく、LIでやるつもりだ。

We have the allies and then the images inside of them

味方がいて、その中に映像がある。

So for this to work, we have to work with direct siblings and we don't want to bounce back and forth

だから、これを成功させるためには、直接の兄弟と仕事をしなければならない。

There's probably ways we could use has but it just would complicate something for nothing

ハスを使う方法もあるだろうが、無駄に何かを複雑にするだけだ。

We're already gonna be using has anyway, so I'm gonna say LI

どうせhasを使うんだから、LIってことにしておくよ

Hover and we need to say plus LI and what we're gonna do here is say that the we'll give it an outline so it doesn't shift the layout at all five pixels solid lime and

カーソルを合わせると、プラスLIと表示される。

Now if I hover on one of these you can see it's not the one I'm currently hovering on but the one after it is

このうちのひとつにカーソルを合わせると、現在カーソルを合わせているのがそれではなく、その次のものであることがわかる。

Getting that green outline on there and I wouldn't actually do this

緑色のアウトラインを描くことで、私は実際にはこんなことはしない。

This would just you know be very frustrating as a user

これは、ユーザーとして非常にフラストレーションが溜まる。

But it's going to show that we can select an item that's coming after something

しかし、これは何かの後に来る項目を選択できることを示している。

And I'll show you a way that we could probably use this in a good way

そして、これを良い意味で利用できるかもしれない方法をお見せしよう。

And but it are not a good way, but maybe a useful way

でも、それは良い方法ではない。

But let's come here on the LI hover where what we're gonna do is LI and then we can say

しかし、ここではLIホバーでLIを表示し、次のように言うことができる。

Has and I'm gonna wrap all of this together and we can just say plus hover

このすべてをまとめて、プラス・ホバーと言うことができる。

So if we hover on an LI if the element after it is currently hovering

つまり、LIにカーソルを合わせると、その後ろの要素が現在カーソルを合わせている場合

Let's just change this over to pink or something just so we see that it's a different color

これをピンクか何かに変えて、違う色だとわかるようにしよう

So now the preceding sibling or the sibling before it is getting the pink and let's change that pink to a hot pink

では、その前の兄弟がピンクになり、そのピンクをホットピンクに変えよう

So it actually stands out on this dark background and there we go

だから、この暗い背景の上でも目立つ。

You can see we're selecting the element just before and the element just after

直前の要素と直後の要素を選択しているのがわかるだろう。

And we can do this to another degree too because I'm using the direct sibling

そして、私は直接の兄弟を使用しているので、私たちは別の程度にもこれを行うことができます。

Selector here, but I could change this to be a tilde like that

ここではセレクタだが、これを次のようにチルダに変更することもできる。

And that means it's gonna select all the previous and all the ones before it

ということは、その前とそのまた前がすべて選択されるということだ。

So you can see as I move that around it's doing you get the idea of what it's doing, right?

だから、それを動かしているうちに、何をやっているのかがわかるだろう？

So all the ones before are pink and all the ones after are green

だから、前のものはすべてピンクで、後のものはすべて緑だ

So we could do some interesting things with that as well

だから、それを使って面白いこともできるだろう

And if you have any ideas on how you might use something like this

また、このようなものをどのように使うか、アイデアがあれば教えてほしい。

Please leave a comment down below and let me know

下の方にコメントを残してください。

But what I'm gonna do is I'm actually gonna go back to this version of it and we could also add in one more selector

しかし、これからやることは、このバージョンに戻って、もうひとつセレクタを追加することだ。

Here where we could do something showcase showcase list

ここで、ショーケースのショーケースのリストに何かできるかもしれない。

List Li hover and maybe this gets the outline as well. So we say outline of

リスト・リーがホバーすると、アウトラインが表示されます。つまり

Lime then this one gets like green on it and then this selector. I'm gonna cut that we're gonna do a comma here just so both of them get the same styling on it and