Working with sprawling page design can be tricky when applying CSS styles. Sometimes you want, or rather need, to be direct and precise with what you want to work with. In this regard, you need a way to navigate the CSS selection process. Fear not, as this is why you have the power of CSS attribute selectors! In this brief guide, you will take a look at just what an attribute selector is and how you can use it
Just What is a CSS Attribute Selector?
When you apply CSS styles to an HTML component, you have to declare exactly what you want to work with. Generally, CSS has three syntax components to consider. The selector, the property, and the value. You can see an example of this below.
This shows us the basics of how you make a targeted selection using CSS. Now, what you want to explore is how to make a deeper selection by looking at specific attribute selections in the HTML. For example, if you wanted to target a specific paragraph or heading tag.
How to Create a CSS Attribute
In HTML, an attribute tag can be added to an element to give it a form of definition. Creating an attribute is a simple notion of using square brackets for the desired element. You would first declare the selector you wish to work with, then follow it with a set of square brackets that contain the target attribute(s). See the example below.
<body> <p>Welcome to attribute selectors!</p> <p>With Udacity, learning at home is easy!</p> </body>
In the example above, you have two paragraph elements in the HTML body. Left as is, they will simply display as text on the page. However, you will create and use attribute tags to modify their appearance. In the example below, you will add the attribute titled “note” to the paragraph tags.
<body> <p note>Welcome to attribute selectors!</p> <p note>With Udacity, learning at home is easy!</p> </body>
In the CSS file, you will add the following to work with that “note” attribute.
[note] { background-color: red; font-style: italic; font-family: Arial, sans-serif; color: white; }
Once you save these changes and refresh my HTML, you will now see the simple text has the following appearance change.
As you can see, the CSS targeted the “note” attribute you created and applied the styling to both of the paragraph tags. This allows us to not only target all the paragraph tags in the body by a grouping of attributes but also allows us to specify which tags you will be working with as well. This is done by providing a value to the attribute. Take the following for example where the value of “home” is added in the second paragraph tag.
<body> <p note>Welcome to attribute selectors!</p> <p note="home">With Udacity, learning at home is easy!</p> </body>
Inside the CSS you will also target the value of “home” on the selected attribute.
[note="home"] { background-color: red; font-style: italic; font-family: Arial, sans-serif; color: white; }
Once again, you will save the changes and refresh my HTML. The resulting change is shown below.
Here you can see that only the second paragraph tag remains with the applied CSS styles. This is because you specified to only target the attribute of “note” that had a value equal to that of “home.”
It’s worthy to note that the attributes are case sensitive. If you were to use “Home” instead of “home,” the CSS would not have been applied as the target value would not have been found.
Advanced Attribute Selectors
With the basic concept of using an attribute selector down, you can move on to other options available to us.
First, let’s look at how you can use class for selection options. Take the following example below.
<body> <p class="intro">Welcome to attribute selectors!</p> </body>
You can see there is a paragraph tag with the class of “intro” created. If you want to have our CSS target the “intro” class, you can specify it as shown below.
[class|="intro"] { background: lightgray; font-weight: bold; }
You still apply the square brackets to contain the attribute selection. This will let the browser know that you want the CSS to work on a class with the value of “intro.”However, take note of the vertical line added after the class notice. This is a way to advise the browser that you want to select ALL the elements that start with the value of “intro.” You can also modify it using a hyphen as well, such as “intro-part1” for example.
Note!: You cannot use spaces such as “intro part one,” as it will not be interpreted correctly. Spacing and case usage is important.
Suppose you want to target all attributes that contain a specific word or value? This is where you can apply the star value. Take a look at the example below. You can see you now have three paragraph tags. Each has an attribute assigned as well.
<body> <p Action="Open-Door">Click here to open the door.</p> <p Action="Slam-Door">Click here to slam the door.</p> <p Action="Close-Door">Click here to just close the door.</p> </body>
The attributes above have different values assigned. Listed as “Open-Door”, “Slam-Door”, and “Close-Door”. Suppose you wanted to target all attributes that had the word “Door” within them? You could do so using the star (*) operator as shown below.
[Action*="Door"] { background: lightgray; font-weight: bold; }
This would select all the attributes labeled as “Action” as each one has the word “Door” as part of their values.
Note: This can be used in a smaller direction as well. If you had made the target value just “Do” or “oor” the same result would have come through as you targeted any values of “Action” that contained those specified values. Consider how this can be used to help you target specific elements of your page without having to type out each individual CSS action. Also, consider the cascading hierarchy of CSS commands you apply. Noting that generally, the last applied style to an element is the one that will appear on the page.
The Possibilities Ahead
This brief introduction to using CSS attribute selectors can help you to both add speed and organization in your style direction. Yet, as with many paths in design, this is just a small angle of the possible options available to you. More complex concepts such as child and sibling selectors can allow you to add funneled, (or very specified), styles to your page. If you came through this short tutorial and want more, consider diving deeper to see just how much control you can apply to your own CSS styles.
_____________________________________
The modern world runs on code and that code comes from people like you. If you are looking to fly farther and stronger than ever before, take the first steps with code. Learning to code can help you open doors to those new possibilities of a better you. Embrace Udacity’s Intro to Programming Nanodegree today to start the journey.
