CSS For Elements That Are Outside Other Elements
CSS For Elements That Are Outside Other Elements - CSS stands for Cascading Style Sheet which is a programming code that aims to give a style to the look of an HTML element. With CSS then we can make the look of the HTML codes become more interesting. To set this view, then we must still determine the identification code of the target element.
Generally we provide a style for the element in accordance with its identity, usually with class or with id, or in accordance with the HTML tag itself. We will more easily create CSS for elements that are within other elements such as div or other.
But what if the target element is outside the other element? Of course this should use the appropriate CSS so that the style we create can be about the elements that become the target. In making the layout of a web page, sometimes we find the situation where the target element is not a child or element outside the other element or element is outside the div.
If we make CSS for the element is not right, then the style we create will not affect the target element. And as I know, there are 2 CSS selectors to recognize elements that are outside of other elements, ie + and ~.
How to use it as follows:
CSS above to set the h3 tag located just below or after the div tag
And the following CSS to set h3 tag which is under div tag
Or to set the tag p that is under the div tag
That's the article I can share this time about CSS For Elements Beyond Other Elements. Hopefully with a short enough article this can be useful and good luck.
Generally we provide a style for the element in accordance with its identity, usually with class or with id, or in accordance with the HTML tag itself. We will more easily create CSS for elements that are within other elements such as div or other.
But what if the target element is outside the other element? Of course this should use the appropriate CSS so that the style we create can be about the elements that become the target. In making the layout of a web page, sometimes we find the situation where the target element is not a child or element outside the other element or element is outside the div.
If we make CSS for the element is not right, then the style we create will not affect the target element. And as I know, there are 2 CSS selectors to recognize elements that are outside of other elements, ie + and ~.
How to use it as follows:
div + h3 { color: red;}
CSS above to set the h3 tag located just below or after the div tag
<div>
<p>My name is Donald Duck.</p>
<p>I have many friends:</p>
</div>
<h3>We are all humans!</h3>
<p>All my friends are great!<br>
But I really like Daisy!!</p>
<p>Ciao bella</p>
<h3>We are all animals!</h3>
<p>My latest discoveries have led me to believe that we are all animals:</p>
And the following CSS to set h3 tag which is under div tag
div ~ h3 { color: blue;}
<div>
<p>My name is Donald Duck.</p>
<p>I have many friends:</p>
</div>
<h3>We are all humans!</h3>
<p>All my friends are great!<br>
But I really like Daisy!!</p>
<p>Ciao bella</p>
<h3>We are all animals!</h3>
<p>My latest discoveries have led me to believe that we are all animals:</p>
Or to set the tag p that is under the div tag
div ~ p { color: blue;}
<div>
<p>My name is Donald Duck.</p>
<p>I have many friends:</p>
</div>
<h3>We are all humans!</h3>
<p>All my friends are great!<br>
But I really like Daisy!!</p>
<p>Ciao bella</p>
<h3>We are all animals!</h3>
<p>My latest discoveries have led me to believe that we are all animals:</p>
That's the article I can share this time about CSS For Elements Beyond Other Elements. Hopefully with a short enough article this can be useful and good luck.
Post a Comment for "CSS For Elements That Are Outside Other Elements"
Provide comments relevant to the posted articles and provide critiques and suggestions for the progress of the blog