ADVANCED CSS SELECTORS
7 min
May 08 2021
I am writing this article because I feel like we are focusing more and more on JS in the front-end world. Forgetting about CSS and HTML possibilities. In this piece, I’ll cover some CSS selectors starting with a child selector and hope to finish with some more surprising one. Enjoy

Child selector

Direct child selector only identifying p elements that fall directly within an article element. article > p {…}
Advanced css selectors

General sibling selector

General sibling selector selects elements that follow and shares the same parent. H2 the element must come after p element. p ~ h2 {…}
General sibling selector

Adjacent Sibling Selector +

Adjacent Sibling Selector selects the element that directly follow and shares the same parent Only p elements directly following img element will be selected. img + p {…}
Adjacent sibling selector

Attribute Selectors

Attribute selectors select an element based on the presence or/and value of given attribute. There are several types, examples below.
Selects all elements that have alt attribute. divalt {...}
Attribute selectors
Selects all elements that have alt with exact value. divalt=”something” {…}
Attribute selectors 1
Selects elements that contain value but in selector also exact value. (simply needs to have the something anywhere in the value of the attribute) divalt*=”something” {…}
Attribute selectors 2
Selects elements that start with a selector value. divalt^=”something” {…}
Attribute selectors 3
Selects elements that end with a selector value. divalt$=”something” {…}
Attribute selectors 4

div:nth-last-child(2) {…}

Selects the last two div, they have to be siblings/share same parent
Divnthlastchild2

:not(:last-child) {…}

Selects all elements which are not the last child. Combination of :not and :last-child.
Notlastchild

div:first-of-type {…}

Select the first siblings of its type.
Divfirstoftype
Hope that helps. Please share your most interesting selectors in comments!
BLOG LATEST
Popular articles
GOT AN IDEA? LET'S DISCUSS!
Share your project’s scope, time scales, technical requirements, business challenges, and other details you consider necessary. Our team will study them and contact you soon. Let’s make an exciting product together!
By sending this form I confirm that I have read and accept the Privacy Policy
WELCOME TO OUR OFFICES
Georgia
Russia