DEV Community: Edozie Onyeanusi

Understanding CSS Selectors: Attribute Selectors

Edozie Onyeanusi — Sat, 06 Feb 2021 21:41:26 +0000

Hello World!😀 Welcome to the fifth article in my CSS series, Understanding CSS Selectors. In this article, we would be delving into attribute selectors; what they are and how to use them. Alright, let’s head right into it.

What are Attribute Selectors?
Attribute Selectors are a class of CSS selectors which functions by matching or selecting elements based on the presence of an attribute or the value of an attribute.

For some of us who might not be too familiar with HTML, attributes are special words used in the opening tags to define additional or special properties or characteristics of the element. Attributes consist of a name and value pair, name=”value”. The value is always contained in quotation marks, but there are some attributes which don’t have the name-value pair, these attributes are called Boolean attributes. Examples of some common ones are checked, disabled, readonly, required, etc.

Just like we saw in the last article where we discussed pseudo-class selectors, attribute selectors can be further divided into different types with each differing on how the selector is written, whilst still following the general syntax for declaring stylings which is the selector coming first followed by the property and value in the curly brackets. Let’s discuss these different types of attribute selectors.

[attribute] Selector

This type of attribute selector is used to select all the elements that have the specified attribute and applies the CSS property to that attribute.
The example below selects every <a> element with href attribute in the HTML file and colours it red:

a[href]{
  color: red;
}

[attribute = “value”] Selector

This type of attribute selector is used to select all the elements which have a specific attribute which has a value that is exactly the same as the specified value and applies the CSS property to that attribute.
The example below selects every <a> element with href=”#” attribute in the HTML file:

a[href="#"]{
  color: purple;
}

[attribute~=”value”] Selector

This type of attribute selector is used to select all the elements that have the specified attribute which, in turn, has a value which is exactly the same as one of the values among a list of values separated by whitespace.
The example below selects every element with class attribute containing a whitespace-separated list with the word dogs in the HTML file:

div[class~="dogs"]{
  color: brown;
}

The example above will match elements with class = “dogs”, class = “animals dogs” and class = “dogs animals” but not class = “dogs-animals”.

[attribute|="value"] Selector

This type of attribute selector is used to select any element which has the specified attribute whose value is exactly the same as the value or it is followed immediately by a hyphen.
The example below selects every element with class attribute whose values begin with the word dogs or is followed by a hyphen(-), "dogs-purebred":

div[class|="dogs"]{
  color: royal blue;
}

[attribute^=”value”] Selector

This type of attribute selector is used to select any element which has the specified attribute whose value begins with the value that was specified in the selector. The value does not have to be the whole word or a whole word.
The example below selects every element with a class attribute which has a value that begins with “seek”.

div[class^="seek"]{
  font-style: italic;
}

[attribute$=”value”] Selector

This type of attribute selector is the opposite of the [attribute^=”value”] selector and is used to select any element whose specified attribute has a value which ends with the value specified in the selector.
The example below selects every element with a class attribute which has a value that ends with “er”.

div[class$="er"]{
  font-style: oblique;
}

[attribute*=”value”] Selector

This type of attribute selector is used to select elements whose attribute has the specified value in the selector anywhere in the attribute value in the HTML file.
The example below selects every element that has a class attribute which contains “and” anywhere in the string which is the value of the attribute.

div[class*="and"]{
  font-weight: bold;
}

[attribute operator value i] Selector

This type of attribute selector is similar to any of the selectors that have already been mentioned with an added feature of adding an i or I just before the closing brackets which causes the value specified in the selector to be compared irrespective of its case i.e. it is not case-sensitive. This attribute selector is supported by all browsers except Internet Explorer.
In the example below, all tags with href=”anon” will be selected regardless of capitalization. So, if the href value was Anon, aNon or anything else with the same letters but different capitalization, it would be valid.

a[href*="anon" i]{
  color: yellow;
}

[attribute operator value s] Selector This type of attribute selector is the opposite of the [attribute operator value i] selector in that it compares the value specified in the selector as regards to its exact case, i.e. it is case-sensitive. This attribute selector is however still in experimental stages and is not compatible with most browsers except with the current version of the Firefox Browser on Laptop and Mobile (Firefox 66.0). In the example below, all tags with exactly href*=”AnOn”.

a[href*=AnOn s]{
  color: pink;
}

Why use Attribute Selectors?
If you are a bit familiar with CSS and you may have looked at some CSS code of other people, you would come to notice that the use of attribute selectors is not really common. Many people who write CSS do not feel the need to use the attribute selectors arguing that the addition of another class or ID would just implement the same styling, but what this would go on to do is create a bogus CSS file with a lot of class or ID selectors which intention one would not be able to readily decipher from just looking at the codebase.
One area where attribute selectors are very useful is in styling similar elements which have repeating attributes, let’s see the example below, we have an unordered list of anchor tags with similar href values but which have been differentiated by using the rel attribute.

<ul>
  <li><a href = "#" rel = "asean">Myanmar</a></li>
  <li><a href = "#" rel = "ecowas">Mali</a></li>
  <li><a href = "#" rel = "asean">Cambodia</a></li>
  <li><a href = "#">Kurdistan</a></li>
</ul>

We can then go on style the list items based on the rel attrribute

li a[rel="asean"]{
  font-weight: bold;
}

li a[rel="ecowas"]{
  font-style: italics;
}

One tricky part is that if the rel attribute involved has more than one attribute value, the conventional way of styling an attribute won’t work but you’ll have to use the ‘~=’ combinator instead.

With all of these, we have finally come to the end of this CSS series and I believe it was very beneficial to you. It means a lot to me that you read all the articles to the very end, I am very grateful. I believe this series handled the fundamentals for navigating CSS, with all the knowledge here, you can go to create magic with CSS.

Go Legend. Ciao! ❤️

UNDERSTANDING CSS SELECTORS: PSEUDO-CLASS SELECTORS

Edozie Onyeanusi — Sat, 12 Dec 2020 21:28:26 +0000

Hello, World! Welcome to the fourth article in my CSS series, Understanding CSS Selectors. In this article, we would be delving into the pseudo-class selectors; what they are, how to use them and differentiating them from their close cousins, pseudo-elements. Alright, let’s jump right in.

A CSS pseudo-class is a keyword added to a selector so as to style a specific characteristic or state of that selector. Some of the pseudo-class are :hover, :focus, :nth-child and :last-of-type. It can be used to style an element when the mouse hovers over it, to style an element on focus or style visited and unvisited links. As we can see from the examples are above, it appears that these keywords all seem to be preceded by a colon (:). In most case scenarios, the pseudo-class is used along with a selector, the selector comes first and then the pseudo-class along with the colon. Below is the general syntax for its use.

General Syntax for pseudo-class selectors

The pseudo-class selectors can be divided into 5 or 6 types, depending on if you don’t regard the pseudo-elements as a pseudo-class at all. These types are:

Link related pseudo-class selectors
The most frequently used ones which are concerned with styling anchor tags at their different states, these pseudo-classes are :link, :visited, :hover and :active. To style the link appropriately, you should go with the LVHA order which is to put the :link pseudo-class first, followed by the :visited then :hover and :active.
Input and link related pseudo-class selectors
This allows styling for the input html elements by selecting the input elements based on some state or attribute of the element. Some of them include :focus, :checked, :target, :required, :disabled, etc.
Position and Number-based pseudo-class selectors
This allows for styling based off of their order or position on the document tree rather than just its type, id or attribute. They include :root which targets the root element of the document tree, the siblings pseudo-selectors which include the :first-child, :last-child, :nth-child(), :nth-last-child(), :only-child, the :first-of-type, :last-of-type, :nth-of-type and :only-of-type.
Relational pseudo-class selectors
This category includes the :empty pseudo-class and the negation pseudo-class, :not() which takes an argument which is filtered out from the selection to be made. Unlike the general syntax for pseudo-class selectors, the :not() pseudo-class may be chained or not be chained but it may not have another negation pseudo-class as its argument.
Text related pseudo-class selectors/pseudo-element
This category as the name implies is concerned with text. Here we have the ::first-letter, ::first-line, ::selection and then the :lang() which styles elements if it matches the language attribute.
Content related pseudo-elements
This category of pseudo-class selectors are used to create new elements that are not specified in the markup of the document and can be manipulated much like a regular element. The ::before and ::after pseudo-elements belong to this class.

Pseudo-elements behave in a similar way with pseudo-classes, however they act as if you had added a whole new HTML element into the markup, rather than applying a class to existing elements. Pseudo-elements start with a double colon (::). This :: notation (double colon notation) was introduced by the W3C in order to establish a distinction between pseudo-classes and pseudo-elements. For backwards compatibility, the single-colon syntax is acceptable for pre-CSS3 selectors. So, :after is a pseudo-class and ::after is a pseudo-element. You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.

General Syntax for pseudo-elements selectors

There are lots of other psuedo-classes and psuedo-elements which are not listed here because of they can’t easily fit into the categories and I did not explain them individually since we are not going into much details but a good resource to read more about these selectors would be to check the MDN Web Docs and read up on CSS pseudo-classes, the website explains in details each selector and how it should be used.

To check for browser compatibility of the selectors, you can always use caniuse.com.

Thank you for reading, if you found this article helpful, please do well to share, it would probably be beneficial to someone else too.

Thank you once more for reading to the end, see in you in the next article where we would be talking about the Attribute Selectors.

Ciao! ❤️

UNDERSTANDING CSS SELECTORS: COMBINATOR SELECTORS

Edozie Onyeanusi — Wed, 08 Jul 2020 11:57:33 +0000

Hello, World! Welcome to the third article in my CSS series, Understanding CSS Selectors, a series with aim to give a more enlightening explanation about the use of selectors as selectors are pivotal in carrying out a good project with CSS. In the previous articles, I have given explanations about what selectors are, talked about the 5 types of selectors and we have talked about the four types of the basic CSS selectors and how they are used and how to navigate specificity with them.

In this article, we would be looking at the combinator selectors and how they are utilized in adding styles to the webpage. As we have stated in the previous articles, selectors are patterns used to select the elements you are trying to style. A selector can be used singularly as a simple selector or as a complex selector, in situations, where styling becomes less straightforward which is where combinators now come in. A combinator is a character that combines two or more selectors in a way that gives them a useful relationship to each other and the location of content in the HTML document. For example, we can target only a particular child element in a parent element or we can target a certain element and it’s adjacent sibling.

CSS combinators are subdivided into four classes;

Descendant Combinator ( )
Child Combinator (>)
Adjacent Sibling Combinator (+)
General Sibling Combinator (~)

We would be looking at each other individually to appropriately explain them.

The Descendant Combinator ( )
The descendant selector is typically represented by a single space ( ) character and is used between the two selectors such that the elements of the second selector will be styled if the first selector corresponds with their ancestor name (a parent, parent’s parent, parent’s parent’s parent, etc.)

The ancestor selector represents any structurally superior element in the hierarchy, this can be a parent or the parent of a parent and so on. The descendant selector represents any of the descendant element in the hierarchy, it doesn't have to be a direct child.

Let's look at an example of the descendant combinator usage
HTML

CSS

So from the CSS code above, we would expect only list items with an a tag to be coloured blue as the other list items do not have the a tag even though they are children of the ul tag.

The Child Combinator (>)
The child selector is represented by a greater than (>) character placed between two selectors. It is used to show that the second selector is an immediate child of the first selector.

The child selector is quite stricter from the descendant combinator because it would not style the elements of descendant tags that are further down the family tree even though they are the same with the second selector.

Let's look at an example of the child combinator usage
HTML

CSS

If you run the code above, we would get the first paragraph in blue validating what we have been saying the child combinator but the second paragraph will be coloured red. It would seem that the addition of the combinators increases the specificity of the style properties but this is not necessarily the truth but the reason that style from the p selector wasn't effected by the direct descendant p elements was because the specificity of the div > p was higher because it involves two selectors in contrast to the second selector which involves just one selector.

The Adjacent Sibling Combinator (+)

The adjacent sibling combinator is represented by the plus (+) character placed between two selectors. When the adjacent sibling combinator is used, it targets the second selector which is coming after the first selector. It is used to select the element that is placed right next to another element at the same level of the hierarchy, it's from this property that the adjective ‘adjacent’ is used which means ‘next to’ or ‘adjoining’.

HTML

CSS

From the stylesheet, the styling that would only be effected on the p tags are those ones that right next to the h3 tags.

The General Sibling Combinator (~)

The fourth combinator is the general sibling combinator which is represented by the Tilde operator (~) character. Like the adjacent sibling combinator, the general sibling combinator doesn’t involve the parent but rather sibling tags which are on the same level in the hierarchy. The general sibling combinator selects siblings anywhere within the parent container, it necessarily doesn’t have to be adjacent siblings but the target selector has to come after the first selector. In other words, if you want to select siblings of an element even if they are not directly adjacent, then you can use the general sibling combinator (~).

HTML

CSS

If you run the code, we have from above you would be able to see that all the p tag elements were styled except from the first one although it is at the same level with the h3 tags but it doesn't come after it.

There is also a somewhat fifth combinator called the column combinator which represented by || between two CSS selectors. It matches only those elements matched by the second selector that belong to the column elements matched by the first. This technology is still in the working draft and is not supported by any browser yet. As for the other combinators, they can supported by almost every version of browsers currently in use. To see the versions that support its use, you can visit www.caniuse.com.

According to the MDN Web Docs on Specificity, the Universal selector (*), combinators (+, >, -, ' ', ||) and the negation pseudoclass(:not()) have no effect on specificity. (The selectors declared inside :not() do, however.)

Are Combinators really necessary when we can use ID or Class selectors to directly target some elements?🤷🏾‍♂️🤷🏾‍♂️
The truth is that IDs and Class selectors can directly target elements, which gives us a functional website but they are not efficient enough to handle a complete design. Using the combinators will also help us achieve more flexibility with less code compared to using just the ID or class selectors.

CSS Combinators are great for reducing the amount of extra classes and ID’s in your HTML. The least amount of extra attributes you have in the HTML the better. It will not only reduce the page size but also make maintenance easier.

Thank you once more for reading to the end, see in you in the next article where we would be talking about the Pseudoclass Selectors.

Ciao! ❤️

UNDERSTANDING CSS SELECTORS: CLASS SELECTORS AND ID SELECTORS

Edozie Onyeanusi — Thu, 18 Jun 2020 15:05:07 +0000

Hello, World! Welcome to the second article in my CSS series, Understanding CSS Selectors, a series with aim to help explain more about the use of selectors as know that selectors are pivotal in creating a good project with CSS. If you missed the first article in this series, which was on the basic selectors; the universal selector and the type selectors, check it out in this link, UNDERSTANDING CSS SELECTORS: UNIVERSAL SELECTORS AND TYPE SELECTORS.

From the last article, we looked at Universal and Type selectors, as earlier stated, and in this article we would be proceeding with class and ID selectors. So let’s jump right into it.

Class Selectors, like the name suggests, is a selector that works with the corresponding value or class name of the class attribute. The class attribute which is one of the global attributes, specifies one or more class names or values which is then used in the stylesheet to style the elements with the corresponding class name. Class selectors are represented with a period or full-stop (.) before the class name.

To use the class selector, we just have to give a value to the class attribute and make sure that our class name in the stylesheet corresponds to the name in the HTML tag. Note that the class name is principally for linking elements in your HTML file so that they could be styled as a group in the stylesheet and they do not in any way influence the semantic structure of the HTML document.

Class names are also case-sensitive and allow for the use of hyphens or underscore in the place of whitespaces. Class selectors have a specificity value of (0, 0, 1, 0) which means that they will be prioritized ahead of type selectors but would have ID selectors prioritized before them. Specificity increases when the class selectors are combined or when the selector is limited to a specific element.

ID selectors (pronounced as eye-dee) are quite similar to how classes are denoted, except that they are represented by an octothorpe, a pound sign or hash character(#), attached to its id name rather than a period and an id attribute attached to the HTML element instead of the class attribute.

Like the class selector, the ID selector is case-sensitive, must not start with a number and must exactly match across HTML, CSS and Javascript but in contrast to the class selector which can be used to select more than one element, the ID selector can only be used to select one unique element which means an HTML element with two or more ids would not be validated.

On the specificity scale, ID selectors rank very high, they have a specificity which is written as (0, 1, 0, 0). This means that their styles would override other selectors written with just tags or classes. However, considering CSS best practices, many devs would advise that you try not to use ID selectors as much as possible, this article, Reasons not to use IDs in CSS by Claire Parker-Jones sheds more light on it.

Let's look at some practical examples of class and ID selectors, below are the HTML and CSS codes for a simple example I created.
HTML

CSS

and the OUTPUT

Looking at the source codes above, we would be able to see that I styled the title and story divs separately and together for the styles that they would share in common. If you look at line 11 on the HTML, you would notice it also had a ID attribute along with the class attribute, then go on to the stylesheet and compare the style properties on lines 21 & 25. On line 21, we see a margin property for the title class but in the output, we see that this property was overridden and that of line 25 which is contained within an ID selector is taken into effect as it bears a margin-top property, this is due to higher specificity of the ID selectors (and because the latter styles in CSS override the former even if they have the same specificity).

Well, we have come to the end of today's article on class and ID selectors. In the next article in this series, we would be looking at the combinator selectors and how they are used.

Thank you for reading to the end, if you found this article helpful, please do well to share, it would probably be beneficial to someone else too. If you are interested in reading more articles, you can follow me to receive notifications when I publish more.

Thank you once more, see you in the next article where we would talking about the Combinator Selectors.

Ciao! ❤️

UNDERSTANDING CSS SELECTORS: UNIVERSAL SELECTORS AND TYPE SELECTORS.

Edozie Onyeanusi — Tue, 09 Jun 2020 21:56:47 +0000

Hello World! Welcome to the first article in my CSS series, Understanding CSS Selectors, the aim of this series is to give an in-depth explanation of the basic CSS selectors as understanding them properly is key to understanding and navigating CSS easily.

CSS stands for Cascading Style Sheets which is used to add styles to documents written in a markup language. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. Selectors are integral to CSS stylesheet, they are a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them.

According to w3schools.com, CSS selectors are divided into five different categories:
1. Basic or Simple Selectors
They select elements based on element name, id or class. They include:
a. Universal selector (*) that basically selects all the HTML elements on a page.
b. Type selectors that select an HTML element with the specified tag name.
c. Class selectors (.className) that select a group of HTML elements having the same class name.
d. Id selectors (#id) that select an HTML element with a unique id.

2. Combinator Selectors
These selectors make use of a combinator when used to add styles. There are four different combinators. They are:
a. descendant selector (space)
b. child selector (>)
c. adjacent sibling selector (+)
d. general sibling selector (~)

3. Pseudo-class Selectors
These selectors are used to select and style an HTML element and define its special behaviour/state. These states cannot be defined by basic or combinator selectors. These states are defined with pseudo-classes such as :hover, :visited, :active, :focus, :nth-child(n), :root, etc.

4. Pseudo-elements Selectors
These selectors are used to style specified parts of an element or to define elements that are not part of the markup. They are ::before, ::after, ::first-letter, ::first-line and ::selection.

5. Attribute Selectors
These allow us to style HTML elements with certain attributes. For example
a. an [input = ”type”] will select an input element of type “text”.
b. an [title ~= ”flower”] will select all elements with a title attribute that contains a space-separated list of words, one of which is “flower”.
c. an [class |= ”top”] will select all elements with a class attribute value that begins with “top”.
d. an [class ^= ”top”] will select all elements with a class attribute value that begins with “top”. The value does not have to be a whole word.
e. an [class $= ”test”] will select all elements with a class attribute value that ends with “test”. The value does not have to be a whole word.
f. an [class *= ”te”] will select all elements with a class attribute value that contains “te”. The value does not have to be a whole word.

In this first article, we are going to be looking at one of the basic selectors called the Universal Selectors and Type Selectors and I’d try to make it as simple as possible.

The Universal Selector is represented by the asterisk (*) character. It is used as a wildcard to select any and all types of elements in an HTML page. If we use just the asterisk, then all the elements get selected irrespective of the parent-child relation.

If we use the asterisk while selecting a parent tag like the example below, then all the child elements will be selected

The Type selector (sometimes referred to as an Element Selector) is represented by the corresponding node name of the element such as p, div, span, a and h1 tags. It is used to select every instance of the element attached to it on the HTML page.

It is worthy of note that the Type selectors are on the lowest level on the specificity cascade; Specificity is the means by which a browser decides which CSS property values are the most relevant to an element and therefore will be applied. This means that almost any other styling will override the style applied via a Type Selector alone and for the Universal selector, it doesn’t hold any specificity value at all. You can read up more on CSS specificity rules by visiting Specifics on CSS Specificity by Chris Coyier and CSS Specificity explained by Paweł Grzybek.

Let's look at some practical examples of universal and type selectors, below are the HTML and CSS codes for a simple example I created.
HTML

CSS

and the output

From the output, we see that the text-alignment and the black border are a result of the style from the Universal (*) selector on line 1 since we see the effects on all the elements. The h3, div and span stylings are all type selector as we see the stylings are only particular to the element name from the HTML document; the text in the h3 tag were all made uppercase, the background colour for the div was made blue and the text colour for both p and span tag was made green and red respectively. If you look at the CSS code critically, you would come to see that the combination of the universal selector and the p tag selector could be replaced solely with the p tag as a selector.

Well, that’s all for this article, I really hope I helped you understand more about the Universal and Type selectors, we would be looking at class and ID selectors in the next article.
Thank you for reading, if you found this article helpful, please do well to share, it would probably be beneficial to someone else too.

See you in the next article. Byebye. 🤗