CSS Selector 10: X: (colon)

css-selector-colon

By using the ‘:’ , you can add several nice effects to your HTML elements. You can change an element when you move your mouse over it, when you click on it, when you’ve already visited that element or when the element is selected. All methods will be discussed below. You can do lots of things with links in CSS. There are selectors like :link and :visited, which can be used to change the styling of the link before and after someone clicked on it. This can be very handy because it can give the usability of your site a boost. If you have a webpage with lots of links on it, it’s easier for your visitor to recognize which links they’ve already visited when the visited links have a separate color.

  1. X:link{}
    With X:link you can style elements where the visitor hasn’t clicked on yet.
  2. X:visited{}
    With :visited you can style elements where the visitor has already clicked on.
  3. X:hover{}
    With :hover you can change the style of an element when the user moves his mouse over it.
  4. X:active{}
    With :active you can change style of an element when the user clicks on it.
  5. X:after{}
    With :after you can generate extra content to display after a selected element. ( X:after{content:”Type content here”;} )
  6. X:before{}
    With :before you can generate extra content to display before a selected element. ( X:before{content:”Type content here”;} )
  7. X:not(selector){}
    With the :not(selector) CSS selector you can select a specific element which does not has to be invoked. You put the class or ID of the element that you don’t want to invoke between the brackets. div:not(#menu){float: none;}
  8. X:checked{}
    With :checked you can select elements which can only be checked like checkboxes or radio buttons. When a checkbox or radio button with :checked is being selected, the style of the checkbox or radio button will change.

Go back to the CSS Selectors overview page

 
Back to Top