Middle Heading 2
![Middle Heading 2]()
CSS3 allows for flexible selector specification with pseudo-classes such as :first-child, :nth-child, and :not(), which can be used in certain design patterns such as OOCSS or in single-class, content-dependent writing styles. The following is an example of a design pattern that can be utilized in a single class and content-dependent manner.
Middle Heading 2.1 Long Middle Heading Test Sample Long Middle Heading Test Sample
Samples are summarized in Codepen. It is easier to understand if you read them against each other. See the Pen pseudo-class-test by ManabuYasuda (@gaku) on CodePen. The HTML is as follows. The parent element named .section contains eight child elements named .section__item. The first two samples have headings, while some of the later samples have different class names and seven child elements.
Middle heading 2.2
For example, if :first-child is used as shown above, it may not work as expected if the most recent child element has elements other than those specified in the selector. Since :first-child counts child elements from the parent element regardless of the element type, the h3 element above the .section__item is also included in the count. So, in this case, if we are looking for the first child element of .section1 and it is a .section_item, it will be applied, but not the first element because it is an h3 and not a .section_item.