How to use multi-selector use in css? [duplicate]

Question

Can I use multiple selector in css?

.name [class=nav]:last-child{
  border: 5px solid yellow;
}

<div class="name">
  <span src="klematis.jpg" class="nav" width="150" height="113">test00</span>
  <span src="img_flwr.gif" class="nav" width="224" height="162">test01</span>
  <span src="landscape.jpg" class="nav item" width="160" height="120">test02</span>
</div>

Answer 1

you can write it in simple way like this

.name .nav:last-child{
  border: 5px solid yellow;
}

<div class="name">
  <span src="klematis.jpg" class="nav" width="150" height="113">test00</span>
  <span src="img_flwr.gif" class="nav" width="224" height="162">test01</span>
  <span src="landscape.jpg" class="nav item" width="160" height="120">test02</span>
</div>

Answer 2

You can chain the selectors. There are so many to walk you through the best place to visit first is probably:

https://www.w3schools.com/cssref/css_selectors.asp

This highlights all the possible types of selector you can do.

Looking at your use of them, if it is a class you're searching for. In your case you won't need to use this [class=nav] a simple .nav would work. But, I can appreciate you may have dumbed this down a little so if you was to do it in the style you have tried it would be like this:

span[class*="nav"]

Things to note are:

Firstly the "" you need to specify inside the quotes what value you're looking for.

Secondly, the use of the * means that whatever attribute you're searching through (in your example classes) it just has to contain the value specified in the "".

There are other symbols you can use in place of the * such as ^ which searches only the first class in the classlist and $ searches only the last value in the classlist (where classlist can be swapped for any attribute).

Thirdly you have the ability to chain the classes to add weight like:

span.nav.item

Where it searches the spans for the ones with the class of 'nav', then searches again for the ones that also have the class 'item'. This is not best practice in my eyes as it is slightly slower (I have done zero research) as it has to look through all the spans, then through the class list of these, so on, as opposed to just looking straight for the class 'nav'.

If you then want to use an nth-of-type rule you can use :nth-of-type (regex / single number / nth-of-type rule)

Here is a good resource:

https://css-tricks.com/examples/nth-child-tester/

Last thing to probably cover is if you use a :not type request where you would pass the value you wish it not to be into the :not(place-rule-here). So yours would look like this if you wanted to avoid the item class.

.name span[class="nav"]:not(.item){}

Edit

You cannot apply the structure of CSS you want to this html as you cannot apply :last-of-type or similar rules to a .class.

You must add a class to the area you want to style in your HTML or using JS.