March 14, 2010 by J.P.
Recently a back end developer asked me with there was a way to use a wild card in CSS that would allow him to generate ID’s on the fly. The solution I came up with was to use an attribute selector.
When using attribute selectors in CSS the name before the “|” is the attribute targeted. In this case “id” is used but we could have just as easily used “rel”, “input”, “value” etc.
The text after the “|” is what the attribute must start with to be read. The example uses “section”. Each “id” in the html that starts with “section” will be styled. Some id’s use more specific code in certain div’s to give them unique colors showing how the cascading works in the CSS file.
Here is the solution:
View the Demo
CSS Code
[id|="section"]{
border: 10px solid #999;
margin:10px 0;
background:black;
width: 200px;
height: 200px;
}
[id|="section-item"]{
background:green;
}
#section-1{
background:red;
}
#section-2{
background:blue;
}
#section-3{
background:yellow;
}
August 26, 2009 by J.P.
Here is a short and sweet post demonstrating the use of adjacent sibling combinators with text is an easy way to work with unique spacing with headers and copy in general.
Basic Example Code
h1 + p{
padding:20px 0 0;
}
h2 + p{
padding:0px 0 0;
}
h3 + p{
padding:0px 0 0;
}
Here is a link with 3 different headers and style demoing how convenient this approach is.
Eaching header has a unique spacing when followed by a <p/> tag.
August 20, 2009 by J.P.
CSS Attribute selectors are a great way to target specific elements in your page and apply styles to them with out have go back and opening up the template file and changing code.
I find them extremely useful for creating form css.
There are 6 different types of attribute selectors
- [att=value]
The attribute has to have the exact value specified.
- [att~=value]
The attribute’s value needs to be a whitespace separated list of words (for example, class=”title featured home”), and one of the words is exactly the specified value.
- [att|=value]
The attribute’s value is exactly “value” or starts with the word “value” and is immediately followed by “-”, so it would be “value-”.
- [att^=value]
The attribute’s value starts with the specified value.
- [att$=value]
The attribute’s value ends with the specified value.
- [att*=value]
The attribute’s value contains the specified value.
Here is an example page where I have formatted elements with attribute selectors only.
Sample CSS Used
<style type="text/css" media="screen">
p[tile='para1'] {
color:red;
}
input[type="text"] {
width: 200px;
background-color: #DDD;
border:0px;
display:block;
padding:3px;
}
input[type="submit"] {
width: 200px;
background-color: #000;
border:0px;
display:block;
padding:5px;
color:#fff;
margin-top:5px;
}
a[href$='.jpg']{
background:green;
color:#fff;
}
</style>
March 9, 2009 by J.P.
For the first post of this blog I would just like to give props to the theme I’m using called “Wordpress Naked”. It’s a nice way to start your own custom theme since it strips out all css styles and leaves you with the very basics to get your blog starting.
The aim with Naked is that a developer with an XHTML template that they’ve already developed can very quickly apply it to this no-frills theme with the minimum of fuss and research.
Learn More Here
