Final Tutorial: Chiao-Chih Cheng

After all the research for this semester, I would like share one CSS selector— Pseudo Class. Because there has not much clear explanation and full example about how we use Pseudo Class. And I think this is a very important and helpful function, I will do an example so you can easy to understand and apply on your coding. Example

First, I create an unordered list.

And I create a css style for the list item, float to the left, no list-style and 100px width for each item. I also give a background color so we can easy to see.

I will also create a style for unorder list(ul). I will set width 460px, and background color, also just because the lists item are float we can use hidden overflow the close or contain those float. And set margin auto on the center the page.

But why the list item looks center also, that is because the computer defaults. Let’s add padding and margin to clean it out. Line 14 and 22. Also add margin on the bottom to add some space. Line 15.

So what we want here is for the list item to take all the space, with evenly divided with forth one all the way to the end of ul container. The width of ul is 460px, and every list item is 100px width, so we want to have 20px space between every item.

Okay, after do the math, let’s try adding 20px on the right margin.

That’s not what we want. Because we only want the margin-right on first three items (milk, egg and bread), but not fourth(butter). So how we do this? This is the time Pesudo Class for. We want every fourth one has no right margin at all.

After I refresh the browser. The fist row is been fixed, because we target it. But we only tell the computer to target number four but not every fourth one. Here is the “n” for. That is meaning every four nth-child. So now we have everything divided perfect and nicely.

Now, we have a basic understanding and we can do some more. Let’s say we want every fist item in the row has red background.

But is not working like before. Because “1n” means everyone. We want first one be target and from the first one to the next target will be the fourth item.