Css Tutorial

CSS :nth-last-child() Selector

HTML Code <!DOCTYPE html><html><head><style> p:nth-last-child(2) {background: red;} </style></head><body> <p>The first paragraph.</p><p>The second paragraph.</p><p>The third paragraph.</p><p>The fourth paragraph.</p> </body></html> HTML View The first paragraph. The second paragraph. The third paragraph. The fourth paragraph. If you want to join my online or offline graphic designing course than just call me – 9334029817

CSS :nth-child() Selector

HTML Code <!DOCTYPE html><html><head><style> p:nth-child(2) {background: red;}</style></head><body> <p>The first paragraph.</p><p>The second paragraph.</p><p>The third paragraph.</p><p>The fourth paragraph.</p> </body></html> HTML View The first paragraph. The second paragraph. The third paragraph. The fourth paragraph. If you want to join my online or offline graphic designing course than just call me – 9334029817

CSS :not Selector

HTML Code <!DOCTYPE html><html><head><style>p {color: #000000;} :not(p) {color: #ff0000;}</style></head><body> <h1>This is a heading</h1> <p>This is a paragraph.</p><p>This is another paragraph.</p> <div>This is some text in a div element.</div> <a href=”http://rinectar.com/” target=”_blank”>Link to Rinectar!</a> </body></html> HTML View This is a heading This is a paragraph. This is another paragraph. This is some text in a div…

CSS :link Selector

HTML Code <!DOCTYPE html><html><head><style>a:link {background-color: yellow;}</style></head><body> <a href=”http://rinectar.com/”>rinectar.com</a><a href=”https://www.wikipedia.org”>wikipedia.org</a> <p><b>Note:</b> The :hover selector style links on mouse-over.</p> </body></html> HTML View If you want to join my online or offline graphic designing course than just call me – 9334029817

CSS :last-of-type Selector

HTML Code <!DOCTYPE html><html><head><style> p:last-of-type {background: #ff0000;}</style></head><body> <h1>This is a heading</h1><p>The first paragraph.</p><p>The second paragraph.</p><p>The third paragraph.</p><p>The fourth paragraph.</p> </body></html> HTML View This is a heading The first paragraph. The second paragraph. The third paragraph. The fourth paragraph. If you want to join my online or offline graphic designing course than just call me –…

CSS :last-child Selector

HTML Code <!DOCTYPE html><html><head><style> p:last-child {background: #ff0000;}</style></head><body> <p>The first paragraph.</p><p>The second paragraph.</p><p>The third paragraph.</p><p>The fourth paragraph.</p> </body></html> HTML View The first paragraph. The second paragraph. The third paragraph. The fourth paragraph. If you want to join my online or offline graphic designing course than just call me – 9334029817

CSS :invalid Selector

HTML Code <!DOCTYPE html><html><head><style>input:invalid {border: 2px solid red;}</style></head><body> <h3>A demonstration of the :invalid selector.</h3> <input type=”email” value=”supportEmail”> <p>Try typing a legal e-mail address, to see the styling disappear.</p> <p><strong>Note</strong>: The :invalid selector is not supported in Internet Explorer 9 and earlier versions.</p> </body></html> HTML View A demonstration of the :invalid selector. Try typing a legal…

CSS :in-range Selector

HTML Code <!DOCTYPE html><html><head><style>input:in-range {border: 2px solid yellow;}</style></head><body> <h3>A demonstration of the :in-range selector.</h3> <input type=”number” min=”5″ max=”10″ value=”7″> <p>Try typing a number out of range (less than 5 or higher than 10), to see the styling disappear.</p> </body></html> HTML View A demonstration of the :in-range selector. Try typing a number out of range (less…

CSS :hover Selector

HTML Code <!DOCTYPE html><html><head><style>a:hover {background-color: yellow;}</style></head><body> <a href=”http://rinectar.com/”>rinectar.com</a><a href=”https://www.wikipedia.org”>wikipedia.org</a> <p><b>Note:</b> The :hover selector style links on mouse-over.</p> </body></html> HTML View rinectar.com wikipedia.org Note: The :hover selector style links on mouse-over. If you want to join my online or offline graphic designing course than just call me – 9334029817

CSS :focus Selector

HTML Code <!DOCTYPE html><html><head><style>input:focus {background-color: yellow;}</style></head><body> <p>Click inside the text fields to see a yellow background:</p> <form>First name: <input type=”text” name=”firstname”><br>Last name: <input type=”text” name=”lastname”></form> </body></html> HTML View Click inside the text fields to see a yellow background: First name: Last name: If you want to join my online or offline graphic designing course than…

CSS :first-of-type Selector

HTML Code <!DOCTYPE html><html><head><style> p:first-of-type {background: red;}</style></head><body> <p>The first paragraph.</p><p>The second paragraph.</p><p>The third paragraph.</p><p>The fourth paragraph.</p> </body></html> HTML View The first paragraph. The second paragraph. The third paragraph. The fourth paragraph. If you want to join my online or offline graphic designing course than just call me – 9334029817

Open chat