Having worked on a number of quirky projects where I had limited access to the markup I had to find other ways around selecting and styling a number of elements. In order to do this I had to find other ways to select the elements by class or ID (usually class).
Advanced Selectors
Some platforms append a random number to the end of their classes which makes it quite difficult to style, as you aren’t sure if it will always be that number and you would have to style each item individually. To solve this problem I found that you can select a class by it’s prefix:
div[class^="status-"]
div[class*=” status-“]
div[class$=”status”]
Example 1 will select any class beginning with the string that is specified, whereas Example 2 will select any class that contains the specified string; hence the space at the beginning searching for a new class. Example 3 will select any class that ends in the specified string. The above, and all examples will work with any attribute, be it “target”, “href”, “title”, “alt” and so on. Keep that in mind when you are caught in a jam and need an unconventional way of styling a certain element.
Other attribute syntax is as follows:
img[title~=flower]
p[lang|=en]
The first example with the tilde (~) select all image tags where the title attribute that contains the string “flower”. The second example with the vertical pipe will select any p tag where the lang attribute begins with “en”. This is the CSS2 version of “^=”.
Pseudo Elements and their use
Many Pseudo elements are self explanatory however you don’t always know how many options there are. Many of the following I have used before but there are still a few that I have not used and part of this is research for myself to use in the future.
:active, :hover, :visited, :link and :focus are all used mainly on hyperlinks but can be used on other elements if suitable. While the other 4 are quite self explanatory, a:link will select all unvisited links. :root will select the root element of the document.
Using ::selection selects the portion of an element that is selected by a user, the background colour may be changed, font style etc.
The ::after and ::before pseudo elements allows you to insert content before or after the selected element/class. You can do this by using the content:’ ‘; styling rule or you can manipulate the border styling to create an arrow. Those are the two examples off the top of my head but please, go nuts when using them and see what you can come up with.
List Options
The :first-child pseudo element allows you to select the first element of the parent element. If it is p:first-child the first p element of the containing div etc will be selected to be styled. If it is li:first-child, it will be the first list item of the containing ordered or unordered list and so on.
The :last-child is much the same as the :first-child only it selects the last child element of the containing div, list etc.
The :nth-child() is a very versatile pseudo element. You may select the odd or even child elements by specifying :nth-child(odd) or :nth-child(even). You can also use numbers to specify which child is selected. Using :nth-child(3) will start off the selection process from the third child, :nth-child(2n) will select every second child, building on this if we try :nth-child(2n+3) we will select every second child after the third child.
:nth-last-of-type()
:nth-of-type()
:nth-last-child()
Typography Options
You can target the ::first-letter element which will allow you to change the font family, size, colour, weight of the first letter, and similarly with the ::first-line element.
p:only-child
p:only-type-of
p:empty
p:lang(it)
Input Options
If you would like to style a disabled input element you may do so via the :disabled pseudo element and the same with :enabled, of course this needs to be set in the markup first. A required form element may be styled using :required and conversely input:optional can style un-required form elements. Other options available for input elements are :in-range, :out-of-range, :read-only and :read-write. My favourite pseudo element selector is :checked which may be used on check boxes. This can be used in conjunction with the :not() selector as a make shift conditional statement. By using :not(:checked) you are able to make a hacky, JavaScript-free dropdown menu where the “label for=’id’ ” is used to trigger the checkbox.
I may have missed one or two of the pseudo elements but that is the vast majority of them and should give you decent coverage of the options available to you. Best of luck with this, you now have all of the selectors and elements you need to get you out of a jam.