CSS

How to call div element and apply CSS dynamically

Posted on

With jQuery, it is possible to do some interesting CSS tricks such as changing the style of your site dynamically. Let’s say for instance you with to have a certain style applied to your site when a number of conditions are met.You can do all that in jQuery when constructing the site.

Below is the general syntax for doing so

$(‘jQuery selector’).css({“css property name”:“css property value”});

Let us see with an example

//change paragraph text color to blue
$(‘p’).css({“color”:“blue”});
 
//float all divs with class .left
$(‘div.left’).css(‘float’);
 
//change all elements with class .bg-green to have a red background
$(‘.bg-red’).css({“background-color”:“green”});
  • YOu can even nest all the css properties,remove the properites etc

Example:

//Nesting jQuery CSS Code. Short Nested Version
newimg.css({
‘background-image’: “url(‘/images/img.png’)”,
‘position’: ‘absolute’,
‘height’: ’70px’,
‘width’: ‘200px’,
‘top’: ’68px’,
‘right’: ‘2px’});
//change text color from red to green
$(‘#div’).removeClass(‘red’).addClass(‘green’);

 

 

Advertisements

CSS: Pseudo-classes Vs Pseudo-elements

Posted on

The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

A pseudo-class always consists of a “colon” (:) followed by the name of the pseudo-class and optionally by a value between parentheses.

Pseudo-classes are allowed in all sequences of simple selectors contained in a selector. Pseudo-classes are allowed anywhere in sequences of simple selectors, after the leading type selector or universal selector (possibly omitted). Pseudo-class names are case-insensitive. Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to the same element. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document.

Example –

a:hover {

}

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).

A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.

This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification.

Example –

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}