Universal and Attribute Selectors in CSS

► In this video, we are going to look some more at advanced selectors by learning about attribute selectors and the universal selector

The universal selector targets every element on the page from the body element down.

The attribute selector targets elements based on attributes and values they possess. We can reference an attribute name like href, target, src, for example, or target elements whose attributes contain a stated value.

This could be the exact attribute selector which selects an element with an attribute that has an exact value, like a URL for example.

Or we could target elements with a partial attribute selector. These would be attributes where we look for parts of values.

We could look for the attribute values that start a given way ([href^="http"]), or end a given way ([href$=".com"]). We could also select an attribute that contains a substring anywhere within its value ([href*="://"]).

► Timestamps:
0:00 Start
1:00 The project & getting the files
3:14 The attribute selector
4:46 MDN Attribute Reference
5:01 [attr] Simple attribute selectors
5:34 [attr=value] Selecting based on exact attribute value
6:41 Selecting based on partial attribute value
7:17 [attr^=value] Partial attribute prefix selector
8:52 [attr$=value] Partial attribute suffix selector
10:04 [attr*=value] Partial attribute contains selector
11:30 [class] [id] Class & ID attribute selectors
13:43 Universal selector
13:56 The universal selector does not select pseudo-elements
14:20 Universal selector syntax & grouping pseudo-elements
15:13 Summary

► Get the code:

► Links used in the video:

► Other types of CSS Selectors:

► Social Media:

► Code & Projects:

[shansutherland]

So much quality in these videos. Thank you so much. I never knew that half of these selector existed

[audenbickel]

You are a blessing. Thank you for the clear explanations 👍

[pranavguly]

Learning so much from all these selector variations! Thanks 👏

[jovanstrickland]

Seen all the selector videos and understand better thanks to you

[ericrosales]

Love how you show the different variations with the attribute selector. High level stuff

[manendarpverma]

Simple and concise, thanks for sharing