Css selectors

  • 3,143 views
Uploaded on

Every css selector that you will ever need

Every css selector that you will ever need

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,143
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
16
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CSS Selectors
  • 2. It’s So SimpleSelector { propertyName : value; propertyName : value}
  • 3. Basic Selectors
  • 4. * (Universal selector)/* Select every element and apply the following properties */*{ padding : 0; margin : 0}
  • 5. Tag Selector (Just random tag) <!--span { Select all elements with tag span/ p background : red; -->} <!-- Many span elements -->p{ <span>Some span</span> <span>Some span</span> width : 250px; font-size : 18px; <!-- Many p elements --> <p> Some paragraf</p>} <p> Some paragraf</p>
  • 6. #IdName (id selector)#mainDiv { <!-- Main div with ID --> <div id=“mainDiv”></div> background : red; width : 500px; <!-- Some divs --> height : 500px <div> Just a Div</div> <div> Just a Div</div>} <div class=“classDiv”> Just a Class Div </div>
  • 7. .ClassName (Class Selector).justDiv{ <!– First Div --> <div class=“justDiv”></div> background : red; width : 50px; <!– Second Div --> height : 50px <div class=“justDiv”></div>} …. <!– Nth Div --> <div class=“justDiv”></div>
  • 8. Attribute Selector
  • 9. Selector[attributeName = “value”]img[alt= “someAlt”] { <img src=“#” alt=“someAlt”/> width : 500px; <img src=“#” alt=“onlyAlt”/> height : 50px} <form>.allForms[type = “text”]{ <input type=“text”/> width : 150px; <input type=“text”/> padding : 10px <input type=“submit”/>} </form>
  • 10. Attribute Selector MagicSelector[attr.Name ^= “value”]{/*select attribute with value at the beginning */}Selector[attr.Name *= “value”]{/* select attribute with value somewhere*/}Selector[attr.Name $= “value”]{/*select attribute with value at the end*/}
  • 11. p[id ^=“beginning”] { <p id=“beginning-id”> width : 500px; Beginning Text </p> height : 50px} <p id=“this-is-somewere-id”>p[id *= “somewere”] { Somewere Text width : 500px; </p> height : 50px} <p id=“id-at-end”> End Textp[id $= “end”] { </p> width : 500px; height : 50px}
  • 12. CombinatorsChild and Sibling Selectors
  • 13. Parent Child<!-- Just a list --><ul> ul li{ <li>Item 1</li> <li>Item 2</li> background : red; <ol> <li>Nested Item</li> } </ol></ul><!-- List with class --> ul .Item {<ul> background : red; <li class=“item”>Item 1</li> <li>Item 2</li> }</ul>
  • 14. Parent>Child (Direct Children Selector)<!-- Just a list --> ul > li{<ul> <!– direct children --> background : red; <li>Item 1</li> <li>Item 2</li> } <ol> <li> Nested 1 </li> <li> Nested 2 </li> <li> Nested 3 </li> </ol></ul>
  • 15. Sibling + Sibling (Direct Sibling selector)<p> Sample text 1 </p> p + p{<p> Sample text 2 </p> background : red; font-size:18px;<div> Just a Box</div><p>Sample text 3</p> } div + p{<!– This won’t work --> background : red;<div>Just a Box 2</div> font-size:18px;<span>This won’t work</span> }<p>Sample text 3</p>
  • 16. Sibling ~ Sibling (Any Sibling Selector)<p> Sample text 1 </p> p ~ p{<p> Sample text 2 </p> background : red;<div> Just a Box</div><p>Sample text 3</p> font-size:18px; }<!– This will work --><div>Just a Box 2</div> div ~ p{<span>This will work</span> background : red;<p>Sample text 3</p> font-size:18px; }