Css: Difference between revisions

From bibbleWiki
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; }