Common Pseudo-Selectors

Cascading Style Sheets (CSS) is very powerful in helping layout a web page. As a beginner learning HTML and CSS @AustinCodingAcademy, I am finding that there so many options on how to build a page. Starting with simple items, like using a flex box or a fixed box. Often the same page can be created in an infinite number of ways, and learning the strengths of different elements and attributes is key to having a great site.

We implemented code with pseudo-selectors in today’s projects. A CSS pseudo-class is a keyword added to a selector, that gives the selector a special state. A good example is adding :hover to a <button> element. This will cause the button on the web page to turn blue, when a pointer is hovering over it.

Other pseudo class selectors are:

1. :visited, (example- a:visited) Selects links that have already been visited by the browser being used.
2. :active, (example- a:active) Selects the link while it is being activated.
3. :checked, (example- input:checked) Selects every checked <input> element
4. :disabled, (example- input:disabled) Selects every disabled <input> element
5. :empty, (example- p:empty) Selects every <p> element that has no children

Pseudo selectors can also help select child elements on your web page. The example below shows how you would set the color to blue in the first <i> element in all <p> elements.

When creating projects I have found that changing style on an element does not do make the change you desire, because you have given it style in another part of your code. So as a beginner I have tried new styling and found it did not work, because of other styling already preformed. The term “cascading” refers to the hierarchical order in which different style sheets types interact when conflicts arise. Styles sheets cascade with different levels of priority. Level 4 is the highest priority. So make sure you understand where conflicts are, if the code you add is not changing the style like you believe it should.