You might want to narrow the selection with “plate apple:only-of-type”. Intuition: With the Only of Type Selector, “:only-of-type”, we select the element apple, if its the only one of it’s type within their parent element. We could make a it even more specific, if we had different elements with “plate:nth-of-type(2n+3)”. Intuition: We want to select every second element starting from (and including) the third instance. ![]() Intuition: Using the Nth of Type Selector, “:nth-of-type(even)” we select all even elements, in our case plates are the only elements. Intuition: We use the First of Type Selector, “:first-of-type” selector and then specify that we want to look at apples. Afterwards we tell that we only want to look at “bento” elements. Intuition: We select the 3rd child from the end of elements with the Nth Last Child Selector, “:nth-last-child(3)”. If we had more elements, with 3 or more children, we could use “plate:nth-child(3)”. Intuition: We use the Nth Child Pseudo-Selector, “nth-child(3)” and simply just specify, that we want to find an element, that is the third child element of another element. Pro Tip: Remember we use the “.” (dot) for class. The elements is children of the “small” class. Intuition: We want to look at only the last children elements, hence we use the Last Child Pseudo-Selector, “:last-child”. Then we use the “plate >” to select all children to a plate. Intuition: Apply the Only Child Pseudo-Selector, “:only-child”, to make sure we only look at the plates that have one child. Intuition: To select the first child of a group of children, use the First Child Pseudo-selector. Intuition: We use the Child Selector to chose the apple that are a child of a plate. Intuition: Use the General Slibling Selector to get all pickle elements next to a bento. Intuition: We can use the Adjacent Sibling Selector to choose all apples next to a plate. Intuition: Combine the universal selector. Intuition: Use the asterisk, “*”, to select everything. Use a comma between your selectors to combine them. First we want a bento element with an orange child, that holds the class “small”. Intuition: Now we use, what we’ve learnt. Remember we don’t need to write out class, but simply just use the “.” (dot). We choose every orange with a class=”small”. Intuition: Combination of the Class Selector. The “.small” let us select all elements with class=”small”. This is a combination of Descedant and ID Selectors. Intuition: We want an apple within a parent of id=”plate”. Intuition: A Descadent Selector lets you select children elements of another element. Intuition: To select all elements of a type, simply just specify the type. ![]() Generally we solve/read the selectors backwards. ![]() If you get stuck, read below and again make sure you understand the intuition. Simply just complete all 32 challenges and make sure you understand the intuition. CSS Diner is a very nice place to let you learn CSS very fast.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |