- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 6713
...or how to change CSS onClick without javascript. From W3schools:
The :active selector is used to select and style the active link.
The :active selector can be used on all elements, not only links. Here you can read more about CSS's dynamic classes, and here you can see the list of CSS pseudo elements and classes.
HTML:
<!DOCTYPE html> <html> <head> <title>Test</title> <link rel="stylesheet" type="text/css" href="/index.css"> </head> <body> <div id="beAgressive"> Yo! I am going to be active test! <div> And I will be under active test! </div> </div> </body> </html>
CSS:
#beAgressive:active {
color: brown;
visibility:hidden;
}
#beAgressive>div:active {
color: red;
visibility:visible;
}
Notice line #beAgressive>div with ">" sign I said that I want to apply CSS to all divs which are under ID "beAgressive".
Here you can see the example. (click on "And I will be under active test!")
- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 4789
# - id selector, example:
HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/index.css"> </head> <body> <h2 id="featured">featured</h2> test </body> </html>
CSS (index.css):
h2#featured {
color: red;
}
Notice line <h2 id="featured">featured</h2>
element selector, example:
HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/index.css"> </head> <body> <h2>featured</h2> test </body> </html>
CSS:
h2 {
color: red;
}
Notice now that I deleted ID from line <h2>featured</h2> and css is without hash sign.
. -class selector, example:
HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/index.css"> </head> <body> <h2 class="myClass">featured</h2> test </body> </html>
CSS:
.myClass {
color: red;
}
Notice now how I wrote line <h2 class="myClass">featured</h2>
Rest of CSS selectors you can find here.
- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 4553
If we write something like:
<span style="font-style: normal; font-style: italic;">Css test</span>
Then font will be italic, but if we write something like:
<span style="font-style: italic; font-style: normal;">Css test</span>
Then font will be "normal".