Css: Difference between revisions
Jump to navigation
Jump to search
Created page with "= Introduction = == Selectors == === Simple Selector === The body is known as the simple selector and the background-color:#cccc99; is the property name and value <syntaxhighl..." |
|||
Line 28: | Line 28: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== descendant selector | === descendant selector === | ||
This will only effect the <p> elements below a div tag. | This will only effect the <p> elements below a div tag. | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
Line 36: | Line 36: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== child selector | === child selector === | ||
This will only effect the child and not descendant <p> elements below a div tag. | This will only effect the child and not descendant <p> elements below a div tag. | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
Line 54: | Line 54: | ||
=== attribute selector | === attribute selector === | ||
This will only effect if the attribute matches. | This will only effect if the attribute matches. | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
Line 65: | Line 65: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== psuedo selector | === psuedo selector === | ||
This will only effect if the pseudo is true. | This will only effect if the pseudo is true. | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
a:visited {color: #dddddd; } | a:visited {color: #dddddd; } |
Revision as of 03:28, 30 June 2020
Introduction
Selectors
Simple Selector
The body is known as the simple selector and the background-color:#cccc99; is the property name and value
body {
background-color:#cccc99;
}
id Selector
#myid {
background-color:#cccc99;
}
class Selector
.myClass {
font-style:italic;
}
You can group selector with a comma.
h1,h2 {
background-color:#cccc99;
}
descendant selector
This will only effect the
elements below a div tag.
div p {
background-color:#ddddaa;
}
child selector
This will only effect the child and not descendant
elements below a div tag.
div > p {
background-color:#ddddaa;
}
<div>
<form>
<p>I'm a descendant but not a child</p>
</form>
<p>I'm a child</p>
</div>
attribute selector
This will only effect if the attribute matches.
img[alt=spacer] {
padding:0px;
}
<img src="gradient.jpg" alt="spacer">
psuedo selector
This will only effect if the pseudo is true. <syntaxhighlight lang="css"> a:visited {color: #dddddd; }