Apply CSS styles to an element depending on its child elements - ONLY CSS
You can't select a parent element from inside any of its descendants.
However you can make an item looks like selected. The trick is to add position: relative
on outermost parent and use :before
or :after
pseudo element on the child element.
Here is the css code:
.chatrow_1 {
position: relative;
}
[data-user="1"]:before {
background: skyblue;
position: absolute;
z-index: -1;
content: '';
bottom: 0;
right: 0;
left: 0;
top: 0;
}
.chatrow_1 { position: relative;}
[data-user="1"]:before { background: skyblue; position: absolute; z-index: -1; content: ''; bottom: 0; right: 0; left: 0; top: 0;}
<div id="chat"> <p class="chatrow_1"> <span class="time"> 01:41:55 </span> <span class="user-msg"> <span class="c-avatar"> <img src="" alt="Image Description" /> </span> <span class="user"> <strong> <span class="chat-username" data-user="1"> Anonymous_001 </span> </strong> </span> <span class="msg"> <span class="chat-msg">Hello</span> </span> </span> </p> <p class="chatrow_1"> <span class="time"> 01:41:55 </span> <span class="user-msg"> <span class="c-avatar"> <img src="" alt="Image Description" /> </span> <span class="user"> <strong> <span class="chat-username" data-user="2"> Anonymous_001 </span> </strong> </span> <span class="msg"> <span class="chat-msg">Hello</span> </span> </span> </p></div>
Applying CSS styles only to certain elements
The final fix was to use SASS (recommended by someone off-site), as that allows you to nest elements and then automatically produce the final CSS. Step by step the process is:
- Concatenate the two Bootstrap files (
bootstrap.css
andbootstrap-responsive.css
) intobootstrap-all.css
. - Create a new SASS file,
bootstrap-all.scss
, with the contentdiv.bootstrap {
. - Append
bootstrap-all.css
tobootstrap-all.scss
. - Close the
div.bootstrap
selector by appending}
tobootstrap-all.scss
. - Run SASS on
bootstrap-all.scss
to produce a final CSS file. - Run YUI Compressor on the final file to produce a minimised version.
- Add minimised version to head element and wrap everything I want the styles to apply to in
<div class="bootstrap"></div>
.
How to add a style only to certain elements of a list via CSS
You can write something like,
.the_list li:nth-child(1),
.the_list li:nth-child(2) {
border-bottom: 1px solid tomato;
}
So the above selector will select the first and the second child of your ul
element with the class
of the_list
Demo
If you want to support vintage browsers like IE8, you can also do something like
.the_list li:first-child,
.the_list li:first-child + li {
border-bottom: 1px solid tomato;
}
Demo 2
So here in the second selector, we are first selecting the first li
element nested under ul
with a class
of the_list
and then we select adjacent li
to the first child.
How can i apply css stylesheet to single specific element?
There's lots of ways to accomplish this. There's lots of css selectors like ID, classes... See css selectors reference
Best way to achieve what you want is to use classss. See classes
.red { color: red;}.blue { color: blue;}
<label class="blue"> I'm blue</label><label class="red"> I'm red</label>
Apply CSS Style on all elements except with a SPECIFIC ID
Use the :not selector:
div:not(#bar){ color:red;}
<div>foo</div><div id="bar">bar</div>
Applying a stylesheet to only a certain region of an HTML file
It is not possible to do it directly using those CSS files that are distributed, but you can create namespaces for each CSS framework library (or CSS file) and use that wherever you want to use that framework features.
See How to namespace Twitter Bootstrap so styles don't conflict and Is there any ready to use Bootstrap css file with prefix for more details on how to namespace your style-sheets.
If you're using less, then you can create a namespace by adding a pregfix to bootstrap like this:
.bootstrap-styles {
@import 'bootstrap';
}
/* OR */
.bootstrap-styles {
@import (less) url("bootstrap.css");
}
You can use http://www.css-prefix.com/ to prefix any CSS file and then use it like this:
<header class="bootstrap-ns-prefix> (some bootstrap code inside) </header>
<main class="style2-ns-prefix"> (some other framework/css styles that don't get affected by bootstrap) </main>
EDIT
It does not work automatically, you have to namespace each of your CSS and then use those CSS files instead of the initials. The generator www.css-prefix.com works for me, but it adds some extra classes/namespaces at the beginning/end and before/after each comment; you should check that and correct/delete any errors before you proceed. As I mentioned above, you can use LESS or SASS frameworks to generate those namespaces.
Here is an example of using both Bootstrap and jQuery UI together:
<head>
...
<link rel="stylesheet" href="css/bootstrap_ns.css">
<link rel="stylesheet" href="css/jqueryui_ns.css">
...
</head>
<body>
<button class="btn btn-primary">Test Button</button>
<div class="bootstrap-ns">
<button class="btn btn-primary">Bootstrap Button</button>
</div>
<div class="jqui-ns">
<button id="jqbtn" class="btn btn-primary">jQuery UI Button</button>
</div>
<script type="text/javascript">
jQuery(function($) {
$('#jqbtn').button();
});
</script>
</body>
And the result is this one:
As you can see, all three buttons have the bootstrap button classes btn btn-primary
but only the button inside bootstrap-ns
container uses the bootstrap styles.
Here you can see a demo page: http://zikro.gr/dbg/html/bootstrap-ns/
Here you can check bootstrap.css and jquery.ui.css generated by www.css-prefix.com and manual cleaned.
Applying CSS styles to all elements inside a DIV
You could try:
#applyCSS .ui-bar-a {property:value}
#applyCSS .ui-bar-a .ui-link-inherit {property:value}
Etc, etc... Is that what you're looking for?
Related Topics
Parent & Child With Position Fixed, Parent Overflow:Hidden Bug
How to Make a Div Unselectable
How to Make CSS Visible Only For Opera
How to Use Font Awesome from Webjars.Org With Jsf
Property: 0' or 'Property: 0Px' in CSS
How to Align Left Last Row/Line in Multiple Line Flexbox
Converting and Rendering Web Fonts to Base64 - Keep Original Look
How to Set Border'S Thickness in Percentages
How to Dynamically Add a Class to Manual Class Names
How to Make Internet Explorer 8 to Support Nth Child() CSS Element
Can CSS Force a Line Break After Each Word in an Element
Ie7 Z-Index Issue - Context Menu
Sass Invalid CSS Error: "Expected Expression"