sugan Posted November 22, 2007 Share Posted November 22, 2007 i'm in a position to have different styles for the same HTML element inside a div..i'm already using the styles defined in the css file and i'm using that and it's working.but i need two different styles and should be applied on the elements depends upon the position they are coded.eg:the first input inside a div should have a style and the second input element should have different style.already i'm using styles.ann_div{z-index:1000;font-size:90%;height:283px;}.menu select {width:13em;position:relative;border:1px solid #fff; */}the above code is applying the style whenever i create/use a select option inside the div..please help me. Link to comment Share on other sites More sharing options...
Reg Edit Posted November 22, 2007 Share Posted November 22, 2007 i'm in a position to have different styles for the same HTML element inside a div..i'm already using the styles defined in the css file and i'm using that and it's working.but i need two different styles and should be applied on the elements depends upon the position they are coded.eg:the first input inside a div should have a style and the second input element should have different style....You can apply different styles to the same html element type using the class selector. For example:<html><head><style type="text/css">p.a {color:green}p.b {color:red}</style></head><body><div><p>Line 1</p><p class="a">Line 2</p><p class="b">Line 3</p></div></body></html> Link to comment Share on other sites More sharing options...
sugan Posted November 24, 2007 Author Share Posted November 24, 2007 Hi,The above code is usual one which i do. For example i let the users of my site to create a page with their own content.. the page automatically includes the header which contains the css.When ever the user creates html elements the elements in that page should inherit the css based on the position they are created ..For example the user can create his own select elements and the first should have a certain style and the second should have another style and user actually doesn't give any class reference.What can i do in this scenario?Regards,Sugan Link to comment Share on other sites More sharing options...
Reg Edit Posted November 24, 2007 Share Posted November 24, 2007 ...When ever the user creates html elements the elements in that page should inherit the css based on the position they are created .....I doubt that you can do that with css alone. But you don't say what your mechanism is for allowing the user to create html elements. Does it involve scripting? Client-side, or server-side? I should think you will need scripting to set the css class in this way. Please post your existing code that lets the user create html elements. Link to comment Share on other sites More sharing options...
Synook Posted November 25, 2007 Share Posted November 25, 2007 When ever the user creates html elements the elements in that page should inherit the css based on the position they are created ..You can use the sequence selector, but it does not work in IE 6 and I am not sure about IE 7p {/* some styles for first paragraph */}p + p {/* Some styles for second paragraph */} Link to comment Share on other sites More sharing options...
Jerry62704 Posted November 26, 2007 Share Posted November 26, 2007 You might want to use a pseudo-class. For example, div > p:first-child{text-indent:25px}This will indent the first and only first paragraph directly in the div. All other paragraphs will be normal. Link to comment Share on other sites More sharing options...
Jerry62704 Posted November 26, 2007 Share Posted November 26, 2007 Whoops, forgot to give the c/site.http://www.w3schools.com/css/css_pseudo_classes.asp Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.