[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Need to understand some thing

Posted on 2011-10-09
2
Medium Priority
?
328 Views
Last Modified: 2012-05-12
I have some css code regarding clearfix can somebody explain the code for me

for instance clearfix:after what is the : for also html[xmlns] what is the brackets for.  Is there some documentation online regarding  this.  

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

Open in new window

0
Comment
Question by:stargateatlantis
  • 2
2 Comments
 
LVL 75

Accepted Solution

by:
käµfm³d   👽 earned 2000 total points
ID: 36939391
The colon precedes a pseudo-element. These are CSS selectors which aren't tied to a specific tag, but rather a "feature" of a tag. There are also pseudo-classes, which function pretty much the same way. For example, you can use the pseudo-class "visited" to style anchor tags that have been clicked in a different manner than the other non-clicked anchors on your page. You would do this by declaring a style that implemented that rule:

a:visited
{
    color: purple;
}

Open in new window


The brackets are used to select attributes of the element preceding them. In your example, the element is the tag "html", and any such tag that has an attribute named "xmlns" will be styled in a certain way. The use of simply "[xmlns]" means if the attribute exists; if you wanted to check its value, you could do something like, "[xmlns='http://schema.org']", where the "http://schema.org" could vary between pages.
0
 
LVL 75

Assisted Solution

by:käµfm³d 👽
käµfm³d   👽 earned 2000 total points
ID: 36939398
As a further example of the brackets, take these two documents:

<html>
    <body>
        <span>Hello World!</span>
    </body>
</html>

Open in new window


<html xmlns="http://schema.org">
    <body>
        <span>Hello World!</span>
    </body>
</html>

Open in new window


The first will NOT have the style applied to it, because it does not have an "xmlns" attribute on the "html" tag; the second will have the style applied since that attribute does exist.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question