Css Combinators Makes It Look Funny
The use of CSS provides you with an amazing array of options to modify and enhance your HTML pages. Through the use of CSS selectors, those options are allowed to target individual elements of the HTML to ensure the designs can be fine-tuned just where they need to be.
However, selecting and working with each element one by one can not only be a tedious affair, it can also become an overwhelming task. Even more so when you find yourself working on large sites with sprawling code.
This is where the great CSS toolbox helps you out with CSS combinators. In this brief tutorial, you will learn why and how you should use CSS combinators to both ease your workload and unlock clever methods to organize styles.
Note: If you are new to CSS entirely, you can check out the basics here before moving forward.
CSS Selectors and CSS Combinators: What is the Link?
To understand combinators and how they work, you first need to know your way around a CSS selector. Quite directly, a CSS selector is how you inform the browser of what HTML element you want to modify.
In this HTML sample code below, you can see there is one div within the body of the code.
<!DOCTYPE html> <html> <head> <title>CSS Combinators</title> <link rel="stylesheet" href="CSS_Combinators.css"> </head> <body> <div> Udacity CSS Combinators Tutorial </div> </body> </html>
Now, in this example, you have a stylesheet linked to the HTML file above.
div { text-align: center; padding: 20px; color: black; border-style: double; border-color: black; } The CSS selector here is the "div" tag highlighted in red. The browser will take in the stylesheet and see that the div is selected and will apply changes to the linked HTML page. These changes will of course come from the provided properties and their assigned values as found within the curly braces after the selector.
This provides you with the following output on the HTML page.
That Makes Sense, So What is a Combinator?
Just as the name would imply, a CSS combinator provides a way for two selectors to be combined or linked together. The common way this is explained is that the CSS combinator details a relationship between selectors that are to be used.
The question of why you should use a combinator is found in what it allows. A CSS combinator makes it possible to further refine the targets of your CSS selectors. For example, instead of just changing one HTML element you can alter all elements of that type. Another option would be to dig into particular element structures to just affect certain child elements instead.
In this next section, you will get into how a CSS combinator is used. There are four types that will be covered. These are listed below:
- CSS Descendant selector
- CSS Child selector
- CSS Adjacent sibling selector
- CSS General sibling selector
Each of these will be covered with examples to help you understand how to use them for yourself.
The CSS Descendant Selector
The first CSS combinator up is the descendant selector. This selector type will deal with child elements in the HTML. If you find it odd that terms for familial ties are being used, no need to worry. The following examples will tackle that.
In this HTML code snippet image, you can see there is a div tag in use.
Syntax of the Descendant Selector
The CSS descendant selector is used with a simple space applied between the parent and child elements, (with the parent element being stated first). Referencing the HTML example above, you will see how this is done.
<div> <h2>Udacity NanoDegrees, a better way to learn</h2> <p> Learning with Udacity is quick and easy! </p> <p> In fact, it's so easy you are doing it now! </p> </div>
If you wanted to interact with the text inside the div tag but also did not want to apply changes to other sections of the HTML, the CSS descendant selector will help. In this scenario, you want to change the color, font, and boldness of just the paragraphs within the div.
First, you declare the parent tag, in this case, the div. Then you add a space and declare what child element you are going to work on. For this example, you would add a "p" for the paragraph tag. See the code below for an example of this.
div p { --> ( div is the parent and the p is the child ) color: blue; font-family: sans-serif; font-weight: bold; }
This will provide the following result on the HTML page:
Using the CSS descendant selector is just that easy.
The CSS Child Selector
Next, we'll cover CSS combinators and the CSS Child Selector. This can be a bit confusing at first glance as it may seem to go for the same goal as the CSS descendant selector. While a descendant selector will affect ALL elements of a type, the child selector will only affect elements under a direct parent. A good way to remember this is that a child will only listen to its direct parents.
The following example will help to clarify this in a visual context. The HTML code has been altered to add a "button" tag under the parent div tag. Inside this "button" tag is another paragraph tag.
<div> <h2>This heading is a direct child of the div tag.</h2> <p>So is this paragraph tag.</p> <button> <p>This paragraph tag is NOT a direct child of the first div</p> </button> <p>This paragraph tag is also a child of the div tag</p> </div>
The reason the third paragraph tag is not considered a direct child of the div tag is that it is under (or within) the button tag. This now makes it a direct child of the button tag. The following paragraph tag is still considered a direct child of the div tag as it is still under it and not contained within the button tag.
Syntax of the CSS Child Selector
The syntax of the CSS child selector is quite similar to the descendant selector. However, it does require the use of a "greater than" symbol to take effect. The direct parent tag is declared, followed by a space and the ">" character. Another space is added and the child element is stated.
See the CSS example below for a visual reference.
div > p{ color: blue; font-family: sans-serif; font-weight: bold; }
This advises the browser to take all direct child elements of the div tag and style them according to the property values defined with the curly braces. The HTML result is displayed below.
Consider in contrast, if the CSS descendant selector was used in place, the paragraph tag within the button would have also been styled with the rest.
The CSS Adjacent Sibling Selector
The next two CSS combinators you will look at are the sibling selectors. The first up of this duo is the CSS adjacent sibling selector. This CSS combinator provides access to the immediately following element tag selected.
That is the important detail to take note of here. The applied style rule will only affect the element that follows it in an immediate form. Taking a look at the applied syntax will make this make a lot more sense.
Syntax of the CSS Adjacent Sibling Selector
To use the adjacent sibling selector in your CSS stylesheet, you simply need the plus (+) sign. The correct format is to state which element you are working with as normal. Then add a space and the plus sign. Insert another space and state which element you are targeting as the "adjacent sibling" target. Remember that the rule is strict and it only takes effect when it holds true.
In this sample CSS code, you see that the heading number 2 element is selected. It is then told to use the adjacent sibling selector by the use of the plus symbol. Lastly, the paragraph tag is added as the intended target of the styling rules.
h2 + p{ color: blue; font-family: sans-serif; font-weight: bold; }
See the HTML code sample below for the setup:
<div> <h2>This is a H2 tag.</h2> <p>This p tag immediately follows the heading.</p> <button> <p>This p tag is NOT immediately following a H2 tag.</p> </button> <h2>Howdy! This is another H2 tag.</h2> <p>This p tag is after another H2 tag and gets formatted.</p> </div>
With this CSS combinator in effect, you will receive the following results on the HTML page.
As you can see, the rules for the adjacent sibling selector are followed just as written.
The CSS General Sibling Selector
The last CSS combinator to cover is the other sibling option, the general sibling selector. This CSS combinator acts in a similar fashion to the adjacent sibling selector, however it does not follow the same strict rule whereby the styling effect does not continue onward.
The general sibling selector follows through on all elements under the targeted HTML element selected. This means that if another element tag interrupts the direct adjacent flow, the style rules can still follow through.
Syntax of the CSS General Sibling Selector
To get a better grasp on what that flow interruption looks like, check out the following HTML code.
<div> <h2>I am heading tag!</h2> <p>I am paragraph tag 1.</p> <button> <p>I am a paragraph tag inside a button!</p> </button> <p>I am paragraph tag 2.</p> <p>I am paragraph tag 3.</p> <h3>I am another heading tag!</h3> <p>I am paragraph tag 4.</p> </div>
To get a better grasp on what that flow interruption looks like, check out the following HTML code.
You can see that all the elements are wrapped between the div tag. There are four paragraphs located inside the div. Three of them are located after the button tag. They will be the intended targets of the CSS styling.
Now you can see how the general sibling selector is used in CSS. To use this CSS combinator, you will have to insert the tilde (~) character. You first state the selected top element. Then you add a space and insert the tilde. Add another space and state the target element to style. See the CSS code example below for reference.
button ~ p { color: blue; font-family: sans-serif; font-weight: bold; }
In the code example above, the button element is called as the starting point for the styling effect. The tilde symbol lets the browser know you are intending to style with the general sibling selector CSS method.
In this effect, all paragraph elements that come after the button element will receive the applied style values. This provides the following HTML output shown below.
As you can see in the example image, the styling rules for the paragraph tags remained in effect even though a heading tag interrupted the "flow" of the rule. If the adjacent sibling CSS selector was used instead, paragraph number four would not have been styled.
CSS Combinators Are Great, What Do I Learn Now?
Being able to style your HTML with refined ability in CSS is a wonderful skill to have in your toolkit. As you move forward with every new skill in CSS you will find having even just one new option opens up a wealth of style ability.
Combining these CSS options with other web design skills such as adding shadows or even building a web form provides a great springboard for you to strengthen your skillset into real world applications. Not to mention it paves the way to a nice portfolio of work as well.
Thankfully, Udacity blogs cover a wide range of web design skills that can help you pump that digital muscle up! There are content hubs on topics such as HTML, CSS, and JavaScript with easy to follow tutorials for beginners. Each one grows with new content as well to keep you supplied with great material to learn from. Whatever path you choose, it is bound to make you a better you in the end.
________________________________
Why stop at just web development? The power of programming is empowering people to do even more with their designs. If you are looking to advance your career, take the first steps by learning to code. Having these skills can help you open doors to those new professional possibilities. Enroll in Udacity's Intro to Programming Nanodegree today to start the journey.
Start Learning
Source: https://www.udacity.com/blog/2021/04/an-introduction-to-css-combinators.html